动画:淡入淡出元素之间的延迟

Question

我正在使用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>

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

我如何轻松地为每个元素定义这些延迟？

Answer 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中的每个元素起作用)并对参数进行操作。

Answer 2

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