Velocity.js在动画后清除默认值

Velocity.js clearing default values after animation

本文关键字:清除 默认值 动画 js Velocity      更新时间:2023-09-26

我在页面上有一些元素,我想在其中设置动画以查看,但在它们设置动画后,我想将它们上的进一步动画推迟到CSS(通过更改类)。。。我发现Velocity将我所有的动画属性都保留在style=标记中,并使CSS转换变得不可能。

我下面有一个解决方案,但在完成时重置CSS似乎很不确定,我想知道是否有更好的方法?

// first use CSS to hide the element and squish it
$el.css({ 
    width: 0, 
    left: "-10px", 
    opacity: 0,
    marginRight: 0,
    transition: "none"
})
// now animate the width and margin (do this first
// so there's a little gap between existing elements
// before we fade in new element.
.velocity({ 
    width: width,
    marginRight: margin
}, {
    queue: false,
    duration: 230
})
// then fade and move in the new element,
// but this is the iffy bit when it completes
// I have to unset all the styles I've animated?
.velocity({ 
    left: 0, 
    opacity: 1 
}, {
    queue: false,
    duration: 100,
    delay: 130,
    complete: function(els) {
        $(els).css({
            width: "",
            left: "",
            opacity: "",
            marginRight: "",
            transition: ""
         });             
    }
});

通常,您希望动画引擎保持样式内联;否则,最终值将弹出,因为它们在删除时被样式表覆盖。

您也可以执行$(els).attr("style", "");来清除所有样式。