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

Question

我在页面上有一些元素，我想对其进行动画处理以查看，但在它们进行动画处理后，我想将它们的进一步动画推迟到 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: ""
         });             
    }
});

Answer 1

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

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