Question

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

e.g：

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类每个元素的动画。

如何轻松定义每个元素的延迟？

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>

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

2 个答案: