Complete callback fired per animated element when using SlideUp or slideDown

[danieldunderfelt]

Hi!

I noticed the complete callback fires once per animated element when using one velocity call on a jQuery collection of multiple elements, when animating using "slideUp" or "slideDown". I could not recreate the bug using "fadeIn/Out" or other animations. Here's a pen, forked from the one in the docs, showing the bug:

http://codepen.io/anon/pen/azagJQ

[tommiehansen]

Use:

var divs = $("div");
divs.velocity("transition.slideUpOut", { 
    duration: 200,
    complete: function() { alert("Done animating the scale property."); }
});

...or roll your own transitions etc.

[danieldunderfelt]

Oh, cool! The out/in modifier really comes in handy. Thanks!

[kwaak]

Yeah I just encountered this issue as well. Completely contradicts http://julian.com/research/velocity/#beginAndComplete.

[danieldunderfelt]

It does, yes. And "transition.slideUpOut" like tommiehansen said is only available with the UI pack I think.

[tommiehansen]

@danieldunderfelt Yes, transitions is only available within the UI-pack unfortunately. You can use this to register a new transition:

$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [ 
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

Here's an example:

$.Velocity.RegisterUI('fx.slideUpOut', {
    defaultDuration: 500,
    calls: [[ { translateY:  [-100, 0], opacity:[0, 1] } ]],
    reset: { translateY: 0 }
});

// use transition 'fx.slideUpOut'
$('.myBox').velocity('fx.slideUpOut', { complete: myFunction() })

I agree on that it can be a bit confusing though and that one might expect that the base velocity.js includes transitions.

[danieldunderfelt]

Oh yeah definitely! It is a cool feature. However this is a bug in the vanilla Velocity library which goes against expectations when using the normal slideUp and slideDown.