Uikit Switcher with data-uk-scrollspy

Question

我在沿切换器使用动画时遇到了问题。我知道存在data-uk-switcher =“{connect：'＃my-id'，animation：'fade'}”但是我想为div内的每个对象制作不同的动画。这是行不通的，当页面加载，但我点击按钮后，切换内容，什么都不显示。 这里是我的代码：

<div id="home" class="uk-width-1-2 panel-left uk-panel uk-switcher"> 
     <div ng-repeat="obsah in obsah"> 
      <h1 class="uk-margin-large-top" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:100}">{{ obsah.h1 }}</h1> 
      <h2 data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">{{ obsah.h2 }}</h2> 
      <h3 class="uk-text-muted" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:500}">{{ obsah.h3 }}</h3> 
      <p data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">{{ obsah.text }}</p> 
     </div>                 
    </div> 

，我已经找到了解决办法，而不是解决方案的切换

 <nav class="uk-navbar uk-margin-large-top uk-navbar-flip"> 
      <ul class="uk-navbar-nav" data-uk-switcher="{connect:'#home'}"> 
       <li><a href="#" class="active">DOMOV</a></li> 
       <li><a href="#">SNAKE</a></li> 
       <li><a href="#">NEVIEM</a></li> 
       <li><a href="#">O MNE</a></li> 
      </ul> 
     </nav> 

Answer 1

。你不能使用Scrollspy，但你可以使用动画类。动画类的问题是没有延迟选项。但是如果添加自己的css类，则可以计算动画的持续时间。这适合你的目的。

此外，您需要将您的<h1> etc等放在<ul><li>元素内，否则您的切换器将无法工作。 我已经改编自getuikit.com网站上的一个例子小提琴：

<div class="uk-width-medium-1-4"> 
<nav class="uk-navbar uk-navbar-flip uk-margin-large-top"> 
<ul class="uk-navbar-nav " data-uk-switcher="{connect:'#nav-content'}"> 
    <li class=""><a href="">1</a></li> 
    <li class=""><a href="">2</a></li> 
    <li ><a href="">3</a></li> 
</ul> 
</nav> 
</div> 
<div class="uk-width-medium-3-4"> 
    <ul id="nav-content" class="uk-switcher"> 
    <li class="uk-animation-slide-left uk-animation-1" aria-hidden="true">Hello!</li> 
    <li class="uk-animation-slide-left uk-animation-3 uk-active" aria-hidden="false">Hello again!</li> 
    <li class="uk-animation-slide-left uk-animation-9" aria-hidden="true">Bazinga!</li> 
    </ul> 

</div> 

而且这里的CSS adaptions：

.uk-animation-9 { 
-webkit-animation-duration: 9s; 
animation-duration: 9s; 
} 
.uk-animation-3 { 
-webkit-animation-duration: 3s; 
animation-duration: 3s; 
} 
.uk-animation-1 { 
-webkit-animation-duration: 1s; 
animation-duration: 1s; 
} 
.uk-animation-5 { 
    -webkit-animation-duration: 5s; 
    animation-duration: 5s; 
} 

这里的小提琴：https://jsfiddle.net/wannieboy/vo4zz3yf/