Question

我从anime.js切换到Velocity.js，并尝试定义具有延迟不透明性的简单动画。为此，我使用了交错。但是，如果我在其中添加了一个用于交错延迟的函数，那么就不会有延迟的stag动画。每个elemenet都弹出了，但是没有动画和延迟。在第一个中，我尝试使用anime.js来制作动画，而第二个则直接来自github issue。

这也是我的jsbin： https://jsbin.com/firetuh/edit?html,css,js,output

var greenElem = $('.pointGreen');
var yellowElem = $('.pointYellow');
var redElem = $('.pointRed');


setInterval(function() {
  greenElem
    .velocity({
      fill: '#5cb83f',
      opacity: 1
    }, { stagger: 
        function(elem, index) {
            return index * 500
        }
    });

  yellowElem
    .velocity({
      fill: '#feb65c',
      opacity: 1
    }, { stagger: 
        function(elementIndex, element) {
            return 1000 * (0.85 - Math.exp(-elementIndex/10));
       }
    });

  redElem
    .velocity({
      fill: '#d43f3a',
      opacity: 1
    }, { stagger: 500 });
});

Answer 1

这看起来可能是故意疏忽或速度过快的错误。从代码中看来，stagger仅在传入的第一个值是诸如fadeIn或transition.slideLeftIn之类的预先设定的效果时才有效-看起来它不受其他支持动画类型。从理论上讲，您可以通过

自己实现此目的

yellowElem
    .each(function(index, element) { 
        $(element).velocity({
            fill: '#feb65c',
            opacity: 1
        },{ 
           delay: index * 500 
        });
    });

此外，您将需要将setInterval更改为setTimeout

具有自己功能的速度交错

1 个答案: