I have elements on a page that I want to animate in to view, but after they've animated in, I want to defer further animation on them to CSS (by changing classes)... I am finding that Velocity leaves all my animated properties in the style= tag and makes CSS transitions impossible.

I have a solution below, but resetting the CSS on plete seems iffy, I was wondering if there's a better way to do it?

// 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 pletes
// I have to unset all the styles I've animated?
.velocity({ 
    left: 0, 
    opacity: 1 
}, {
    queue: false,
    duration: 100,
    delay: 130,
    plete: function(els) {

        $(els).css({
            width: "",
            left: "",
            opacity: "",
            marginRight: "",
            transition: ""
         });             
    }
});

I have elements on a page that I want to animate in to view, but after they've animated in, I want to defer further animation on them to CSS (by changing classes)... I am finding that Velocity leaves all my animated properties in the style= tag and makes CSS transitions impossible.

I have a solution below, but resetting the CSS on plete seems iffy, I was wondering if there's a better way to do it?

// 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 pletes
// I have to unset all the styles I've animated?
.velocity({ 
    left: 0, 
    opacity: 1 
}, {
    queue: false,
    duration: 100,
    delay: 130,
    plete: function(els) {

        $(els).css({
            width: "",
            left: "",
            opacity: "",
            marginRight: "",
            transition: ""
         });             
    }
});

• javascript
• jquery
• css
• animation
• velocity.js

1 Answer 1

Typically, you want animation engines to leave styles inline; otherwise final values will pop as they get overwritten by stylesheets upon removal.

You can also do $(els).attr("style", ""); to just clear all styles.