到达网页上的特定位置后如何调用CSS动画？

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页面，他们正在做类似的事情。删除“动画”类，并再次添加它以动画下一张幻灯片。您也可以通过将其添加到滑块的过渡功能中来实现。

（（注意：转换功能需要一个'this.transition（）;'或只是挂在这里。）

我会说类似的东西可以解决问题

$('.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();   
  }
});

没有亲自测试代码。因此，请尝试一下。