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: ""
         });             
    }
});

- simey.me

Answer 1

通常，您希望动画引擎保留样式内联;否则，在移除时，样式表会覆盖它们，导致最终值弹出。

您还可以使用$(els).attr("style", "");来清除所有样式。

- execution

---

谢谢，@execution，解释得很清楚！ :) - 根据您的答案，我想重新调整它 :) - simey.me

也许，更清晰的方法是使用$(els).removeAttr("style")。需要考虑的方面是有时您正在处理JQuery的.css()方法无法到达的动画CSS元素。然后，请查看Velocity的“hook”方法。 - CSSian