Help Wanted: Do a better job than me on the slideDown/slideUp sequences

[julianshapiro]

Velocity's packaged slideUp/slideDown sequences are ugly. They're the only part of Velocity's codebase that I don't like: https://github.com/julianshapiro/velocity/blob/master/jquery.velocity.js#L2681

To tackle recoding them, you'll first need to read the docs on Sequences (http://VelocityJS.org/#sequences) and display toggling (http://VelocityJS.org/#display).

Next, here's a snippet you can use to quickly test your fork. Make sure this runs the same in your fork as it does in the current version of Velocity:

$element
    .css({ overflow: "scroll", height: 400 })
    .delay(1500)
    .hide()
    .velocity("slideDown", 1000)
    .velocity("slideUp", 1000)
    .velocity("slideDown", "easeInOutQuad", 1000, function() { console.log("All done!") });

If you have any questions about why the current slide sequences are coded they way they are, ask here. It would be my pleasure to expand on my existing decisions (which I don't think are necessarily very sound).

Two things I'll preemptively point out:

• Overflow toggling is done so that scrollbars don't show during the animation (to parallel jQuery's implementation, but it's also a good idea from an aesthetic standpoint).
• Reverting to a height of "auto" (if appropriate) is an ugly necessity. Refer to the code for more info.

Finally, I'm looking for an enhancement: Don't re-trigger the slideDown animation if the element is already visible. Likewise, don't re-trigger slideUp if the element is already hidden.

[legomushroom]

@julianshapiro I will take this one

[julianshapiro]

I love you.

Sent from my phone.

On Jun 12, 2014, at 1:08 PM, Oleg Solomka [email protected] wrote:

@julianshapiro I will take this one

—
Reply to this email directly or view it on GitHub.

[legomushroom]

@julianshapiro :D 😊

[legomushroom]

Tried the snippet. Doesn't work for me either with my fork or latest Velocityjs release. Element[s] doesn't show up at all. Am I doing right?

[julianshapiro]

Could you please show me a JS fiddle of it not working?

[legomushroom]

Got it, if element uses border-box box model, it fails. That's why it didn't work for me.

[julianshapiro]

Awesome :) One more thing to fix.

[julianshapiro]

Heyo! How's this coming along? Would you like any help?

[legomushroom]

@julianshapiro still tweaking. The last time worked just fine, but then I tried it with a delay :/ Unit tests needed :)

[legomushroom]

made a PR #121

[julianshapiro]

We'll continue this discussion in the PR.

[benoitgrelard]

Am I right in thinking that Velocity's support for slideUp/slideDown is only "vertical" as in "height" or can I also do it "horizontally" as in "width"?

I haven't found a way to do that, could someone let me know if I missed anything?

Cheers!

[julianshapiro]

Heyo! there's no way to do it horizontally :) Although feel free to code your own solution and share it with others if you're interested! You can tweak the current vertical solution.

[ghost]

How can we prevent animation "stacking" when using "slideDown" and "slideUp"? In JQuery I used "stop"?

Example (on click function):

var elem = document.getElementById('#test');
Velocity(elem, elem.clientHeight > 0 ? 'slideUp' : 'slideDown');

[MattyBalaam]

The simple answer is by using Velocity(elem, 'stop').

The long answer is that I just tried it and it causes some issues with caching heights if used before an animation has been completed.

[ghost]

Yes, I have tried that. Animation is messed up then.

[eddneal]

@MattyBalaam Did you find a solution to prevent the animation "stacking" which didn't cause the height caching issue? Thanks in advance.