带有 data-uk-scrollspy 的 UIkit 切换器答案

【问题标题】：Uikit Switcher with data-uk-scrollspy带有 data-uk-scrollspy 的 UIkit 切换器
【发布时间】：2015-12-16 18:14:12
【问题描述】：

我在切换台上使用动画时遇到了问题。我知道存在 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>

【问题讨论】：

标签： javascript html uikit getuikit

【解决方案1】：

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

另外，您需要将<h1> 等放在<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 改编：

.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/

【讨论】：