Treat 'visibility' like 'display'

[wonderfool]

It would be great if we could have a "visibility" option that behaves the same way as Velocity's "display" option - i.e. when set to "visible" it is applied up front, and when set to "hidden" it is applied at the conclusion of the animations.

Also, Velocity is great.

[julianshapiro]

Hey Tai!

Thanks so much for this. I agree with you -- this is a logical extension of Velocity's display option.

Here's the comparison I was looking for: http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden

Definitely gives me some perspective.

[mayfer]

visibility is a valuable option when the element still needs to keep taking up the space it normally does (therefore pushing other elements down) without being visible.

there are many valid use cases with image galleries, drag+drop behaviors, hover effects, etc.

[aFarkas]

I'm currently not really a user of velocity, but very interested and think, that this feature would be quite important.

Here is another typicall usecase:

Sometimes you also want to use visibility: hidden, even if you do not want to have extra space. For example in conjunction with google maps or other JS widgets, which needs to calculate offset/height, /width in those cases you can use visibility hidden in conjunction with height: 0/overflow:hidden as a wrapper.

I really think this is a very good feature.

[oisinlavery]

+1

The differentiator for me is that events would automatically be disabled.

Imagine you use velocity to transition Out a button in a button bar. On completion you don't want to abruptly and have the sibling buttons flow into it's place. If you just set opacity: 0 then the button can't be seen but can still be clicked. I suppose alternatively you could just disable the event on complete but then you'll need to re-enable it on begin.

Also it seems like display:none and visibility:hidden are so closely related that the functionality is expected. Not sure how legitimate an argument that is though!

[julianshapiro]

Oh, right. Animating space collapsing. Yeah, that's pretty solid. I could see some powerful sequences being built on top of that.

---

The delay so far in implementing this has been due to how convoluted it was to support display toggling, and how adding in visibility toggling isn't a bloat-free bolt-on.

Add in the fact that this could simply be accomplished manually by toggling visibility in a callback, and I have been in no rush to implement this.

However, enough use cases have been brought up that I'd like to see this through. I'll see what I can do to reduce bloat.

[julianshapiro]

I have amazing news, great people of Earth. This feature is landing tomorrow.

[julianshapiro]

This has now been integrated: http://velocityjs.org/#displayAndVisibility

Please test and let me know if there are any issues.

[leevigraham]

@julianshapiro To confirm adding visibility: visible to a fadeIn animation should change the visibility css attribute to visible before any animation starts allowing me to measure the height of the element? I'm currently seeing the opacity:0 and display:none.

[julianshapiro]

yup, please post a fiddle if you're having issues. would like to see it. ty!