Animsition：淡入淡出元素之间的延迟

Posted 2023-05-08

【中文标题】Animsition：淡入淡出元素之间的延迟

【英文标题】：Animsition: Delay between fade elements

【发布时间】：2016-09-05 05:54:01

【问题描述】：

我正在使用Animisation 在网站上制作动画。我想在各种延迟中显示元素。

例如：

element1 - starts at 0ms
element2 - starts at 1000ms

我的代码：

<div class="animsition element1">one</div>
<div class="animsition element2">two</div>
<script>
  $( document ).ready(function() 
    var $animsition = $('.animsition');
    $animsition.animsition();
  );
</script>

如你所见，我有$animsition.animsition();，它为每个带有animisition 类的元素激活动画。

我怎样才能轻松地为每个元素定义这些延迟？

【问题讨论】：

api.jquery.com/delay

【参考方案1】：

其实我有这个解决方案：

  <div class="animsition one" data-animsition-in-class="fade-in-left-lg">
    one
  </div>

  <div class="animsition two" data-animsition-in-class="fade-in-right-lg">
    two
  </div>

  <div class="animsition three" data-animsition-in-class="fade-in-left-lg">
    three
  </div>

  <script>
      $( document ).ready(function() 
        $('.one').animsition(onLoadEvent: false, timeout: true, timeoutCountdown: 500);
        $('.two').animsition(onLoadEvent: false, timeout: true, timeoutCountdown: 1000);
        $('.three').animsition(onLoadEvent: false, timeout: true, timeoutCountdown: 1500);
      );
  </script>

我可以为每个元素内联定义动画类型。但这不是我要找的。我必须使用每个元素的属性调用animsition() 函数——这很不舒服。

我更喜欢只调用一次 animsition() 函数（它适用于每个类 animsition 的元素）并对参数进行操作。

【参考方案2】：

<animation 1>.delay(1000).<animation 2>

【讨论】：

我对每个元素都有共同的动画激活器。我没有为每个定义不同的动画。在这种情况下如何实施延迟？另外解决方案：$('.one').animsition(); $('.two').animsition().delay(200000); 不起作用。