javascript - 到达网页上的特定位置时如何调用 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');
            }
        }
    });
});

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

(注意:转换函数需要一个“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();   
  }
});

我自己还没有测试过代码。因此，请尝试一下。