Question

我正在使用fullPage.js脚本，到目前为止，我实现了在到达其中一个“幻灯片”时调用css动画的机制，代码如下所示：

img{
    -webkit-transition: all 1.2s ease-in-out;
    -moz-transition: all 1.2s ease-in-out;
    -o-transition: all 1.2s ease-in-out;
    transition: all 1.2s ease-in-out;

}
#image-one{
    z-index: 0;
}
#image-one.active{
    -webkit-transform: translate3d(200px, 0px, 0px);
    -moz-transform: translate3d(200px, 0px, 0px);
    -ms-transform:translate3d(200px, 0px, 0px);
    transform: translate3d(200px, 0px, 0px);
}

以及后来的javascript：

$(document).ready(function() {

            $('#fullpage').fullpage({

                'verticalCentered': false,

                'responsive': 900,

                'css3': false,

                'anchors': ['one', 'two', 'three', 'four'],

                'navigation': true,

                'navigationPosition': 'right',

                'navigationTooltips': ['one', 'two', 'three', 'four'],

                'menu': '#menu',
                'scrollingSpeed': 1000,
                'scrollOverflow': 'true',



                'afterLoad': function(anchorLink, index){

                    if(index == 3){

                        $('#image-one').addClass('active');

                    }

                }


                });

        });

好的，现在，在达到幻灯片后没有。 3我将拥有这个元素的动画：

<img src="img/a.png" alt="a" id="image-one" />

这很好用。但是，在3号幻灯片上，我将插件liquidSlider放在该网页上的default settings上。在每个选项卡上，我想在用户打开正确的选项卡时放置动画元素。它的html代码如下所示：

<div class="liquid-slider" id="slider-1">
    <div>
    <div id="images">
        <img src="img/a.png" alt="a" id="image-one" />
</div>
     <div class="sometext"> 
    <h2 class="title">title1</h2><p>this image is animated when user sees it because this tab is active when user scrolls down the page</p>
      </div>
        </div>
    <div>
      <div id="images">
        <img src="img/b.png" alt="a" id="image-two" />
</div>
     <div class="sometext"> 
    <h2 class="title">title2</h2><p>how can I animate this picture when user displays that tab?</p>
      </div>
    </div>
    <div>
      <div id="images">
        <img src="img/c.png" alt="a" id="image-three" />
</div>
     <div class="sometext"> 
    <h2 class="title">title3</h2><p>and how can I animate this picture when user displays that tab?</p>
      </div>
    </div>

  </div>

那么当用户选择显示的选项卡时，我应该如何修改我的脚本/创建新脚本来为每个元素设置动画？谢谢大家帮忙！

Answer 1

从我注意到的问题是，当您点击幻灯片3时，动画会立即应用于所有幻灯片。您可以做一个简单的技巧（可能是一个解决方法）让您在离开时一次又一次地触发动画或输入标签。

如果您还要查看他们的Animate.css页面，他们也会做类似的事情。删除课程＆＃39;动画＆＃39;并再次添加它以动画下一张幻灯片。您也可以通过将其添加到滑块的过渡功能中来完成此操作。

（注意：过渡功能需要一个＆＃39; this.transition（）;＆＃39;或者它只是挂在那里。）

我会说这样的话可以解决问题

$('.liquid-slider').liquidSlider({
  pretransition: function() {
   $('#image-one').removeClass('active');
   $('#image-two').removeClass('active');
   $('#image-three').removeClass('active');
   $('#image-one').addClass('active');
   $('#image-two').addClass('active');
   $('#image-three').addClass('active');
   this.transition();   
  }
});

Haven自己测试了代码。所以试一试。

如何在到达我的网页上的特定位置时调用css动画？

1 个答案: