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>等放在<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/

Uikit Switcher with data-uk-scrollspy

1 个答案: