0

スイッチャーでのアニメーションの使用に問題があります。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>
4

1 に答える 1

1

解決策ではなく、回避策を見つけました。scrollspy は使用できませんが、アニメーション クラスは使用できます。アニメーション クラスの問題は、遅延オプションがないことです。ただし、独自の css クラスを追加すると、アニメーションの長さを計ることができます。これはあなたの目的に合っています。

<h1>また、要素内に etcを配置する必要があります。そうし<ul><li>ないと、スイッチャーが機能しません。getuikit.com Web サイトの例の 1 つからフィドルを適用しました。

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

于 2015-12-16T10:14:12.600 に答える