具有自己功能的速度交错

Question

我从 anime.js 切换到 velocity.js 并尝试定义一个具有延迟不透明度的简单动画。为此，我使用交错。但是如果我在其中放置一个交错延迟的函数，我就没有延迟的雄鹿动画。每个 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

具有自己功能的速度交错

velocity stagger with own function

javascript

velocity