javascript - 带 data-uk-scrollspy 的 Uikit 切换器

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

我找到了一种解决方法，而不是解决方案。您不能使用滚动 spy ，但可以使用动画类。动画类的问题是没有延迟选项。但如果您添加自己的 css 类，您可以计算动画的持续时间。这适合您的目的。

此外，您需要输入 <h1>等等 <ul><li>元素，否则您的切换器将无法工作。我根据 getuikit.com 网站上的示例之一改编了 fiddle :

<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 适应:

.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;
 }

这是 fiddle :https://jsfiddle.net/wannieboy/vo4zz3yf/