velocity.js的第一个动画被忽略

Question

我有一个元素,我希望在velocity.js的帮助下转换到某个状态(transform:scale(1)和opacity:1).初始状态在css中设置(transform:scale(.9)和opacity:0).

现在我第一次这样做,动画就不会发生(首次加载时).关闭它(将其设置回原始状态)后,当我再次调用它时,转换效果很好.

我以codepen为例:http://codepen.io/IbeVanmeenen/pen/iFwBE

$element.velocity({
   scale: 1,
   opacity: 1
}

谁可以帮我这个？

Answer 1

Velocity.js使用Forcefeeding,因此忽略样式表中的值.有关详细信息,请参阅forcefeed文档.

起始值作为数组中的第二个或第三个项传递:

$('.js-info-button-open').on('click', function() {
    $(this).next('.js-info-button-content').velocity({
        scale: [1, 0.9],
        opacity: [1, 0]
    }, {
        display: 'block',
        easing: [0, 0, 0, 4],
        duration: 1000
    });
});