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，因此您的樣式表中的值將被忽略。 有關更多詳細信息，請參見the documentation on 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 
    }); 
});