After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions.
My solution involves resetting the CSS upon completion, but it feels unreliable. Is there a better approach?
// Using CSS to first hide and shrink the element
$el.css({
width: 0,
left: "-10px",
opacity: 0,
marginRight: 0,
transition: "none"
})
// Animating width and margin before fading in the new element
.velocity({
width: width,
marginRight: margin
}, {
queue: false,
duration: 230
})
// Fading and moving in the new element, but having to unset styles upon completion
.velocity({
left: 0,
opacity: 1
}, {
queue: false,
duration: 100,
delay: 130,
complete: function(els) {
$(els).css({
width: "",
left: "",
opacity: "",
marginRight: "",
transition: ""
});
}
});