Как правильно сделать спойлер во vue.js?

Question

[QWERTY01]

Вот как я реализовал спойлер
https://jsfiddle.net/nua9t3he/

Но проблема в том, что при скрытии/раскрытии (нажатии серый на треугольник) сначала прорисовывается место под контент (просто белый прямоугольник), а уже потом "выплывает" сам контент поверх этого белого прямоугольника.
Как можно сделать, чтобы сразу выплывал именно сам контент без этого белого фона вначале.

И вообще, нормальная ли это реализация "спойлера" или можно сделать как-то более лучше?

Comments

[Alex]

Советую посмотреть на https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Answer 1

[Дмитрий Макаров]

Неправильно. Вы как раз при нажатии отображаете белый блок и контент заезжает сверху (как и работает)
А вам надо чтобы блок раскрывался, translate вообще не сюда. Используйте transition:all 1s ease; и в закрытом height 0, при открытии auto;
И советую глянуть на реализацию bootstrap/v4/component/collapse
От Vue требуется только добавить класс show или убрать. Остальное через css

Comments

[QWERTY01]

Спасибо