Question

我正在尝试动画库Snabbt http://daniel-lundin.github.io/snabbt.js/

我很享受将动画从内容中分离出来的容易程度，但是在做其他事情之前你又如何等待动画完成呢？我不认为它有任何回调，所以没有办法等待。

我有一个使用元素类作为选择器的函数。我用Snabbt为它们制作动画，但是我想在动画完成后再做一些其他事情。

function _pulseAllItems() {
  // Fade in and out all elements with 'item' class
  snabbt(document.querySelectorAll('.item'), {
    fromOpacity: 0,
    opacity: 1,
    duration: 500,
    springConstant: 1.9,
    springDeceleration: 0.9,
    delay: function(i) {
      return i * 50;
    }
  }).snabbt({
    fromOpacity: 1,
    opacity: 0,
    duration: 500,
    springConstant: 1.9,
    springDeceleration: 0.9,
    delay: function(i) {
      return i * 50;
    }
  });
  // After they have all 'pulsed' do something else.
}

我真的不想使用计时器功能，希望有办法知道它什么时候结束。

提前感谢您的帮助：）

更新

谢谢Paras！我发现你提到的文档附近的allDone函数很有用。

这是一个小小的更新，但我想我会在这里添加这个功能：

function _pulseAllItems() {
  snabbt(document.querySelectorAll('.item'), {
    fromOpacity: 0,
    opacity: 1,
    duration: 500,
    springConstant: 1.9,
    springDeceleration: 0.9,
    delay: function(i) {
      return i * 50;
    }
  }).snabbt({
    fromOpacity: 1,
    opacity: 0,
    duration: 500,
    springConstant: 1.9,
    springDeceleration: 0.9,
    delay: function(i) {
      return i * 50;
    },
    allDone: function(){
      // Do things after animation finish...
    }
  });

}

Answer 1

您可以使用文档here中显示的回调函数。看看＆＃39;完成＆＃39;函数回调。你可以做点什么

     snabbt(element, {
        position: [100, 0, 0],
        rotation: [Math.PI, 0, 0],
        easing: 'ease',
        complete: function(index, total){
          //do something here
        }
    });

希望有所帮助，

伞兵

Answer 2

感谢您的想法; ＆＃39; allDone＆＃39;功能是我一直在寻找的。

你怎么知道Snabbt的动画何时完成？

更新

2 个答案: