[Feature Request] Width toggle

[juliandreas]

A suggestion, which might be useful for sidebars, is a width toggle.

You can basically use the functions you already have in VToggle.vue and change height to width.
So you would have to have two different toggle components I guess (VToggleHeight/VToggleWidth), or can you think of a better solution?

[AustinGil]

So would it be like the VToggle component accepts some prop like direction and it can switch between vertical and horizontal?

[juliandreas]

So would it be like the VToggle component accepts some prop like direction and it can switch between vertical and horizontal?

That would do it.

[brandonpittman]

@Stegosource I was just looking at the toggle source and saw it’s essentially animating height. Now I get why the transition felt a little janky on the toggle. Why not scaleY(1) instead?

[AustinGil]

@brandonpittman the issue I see with scaleY is that the DOM would still maintain the space for the toggled content, so you would have empty space where it will scale in and out. And what you want is the flow of the document to shift to accommodate the changes. It's sort of like opacity:0. You can't see the element, but the space it takes up is still there.

Or I may be misunderstanding you, but I just quickly played around with adding the following styles to a div and toggling the transform on and off:

transition: 0.2s transform ease;
transform-origin: top;
transform: scaleY(0);

I know that a transform is better for performance, but I just couldn't find a better way for the document to apply the change in height than to apply the change to the height property..

[brandonpittman]

I’ll play with it while I’m doing the other thing—see if I can’t get it to play nicely with transform.