速度与自身功能交错

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