How to make a spoiler in vue.js?

Question

css

Here's how I implemented the spoiler
https://jsfiddle.net/nua9t3he/

But the problem is that when hiding / uncovering (clicking on the gray triangle), the place for the content is first drawn (just a white rectangle), and only then the content itself "floats up" over this white rectangle.
How can I make it so that the content itself immediately pops up without this white background at the beginning.

And in general, is this a normal implementation of the "spoiler" or can it be done somehow better?

Answer 1

Not right. When you click, you display a white block and the content moves from above (as it works)
And you need the block to open, translate is not here at all. Use transition:all 1s ease; and in closed height 0, when opening auto;
And I advise you to look at the implementation of bootstrap/v4/component/collapse
From Vue, you only need to add the show class or remove it. The rest via css