Можно как-то еще плавнее сделать сворачиваемость и разворачиваемость строки?

Question

[hollanditkzn]

Получилось свернуть и развернуть строку, только все эти эффекты не совсем плавные
https://jsfiddle.net/hollanditkzn/x2bcukw7/28/ может как-то еще ее сделать плавнее
Там получается что текст не сразу уходит да и кажется что сворачиваемость сначало реско идет потом останавливается и продолжает потом

Answer 1

[Антон Спирин]

Посмотрите как это сделано у меня тут https://jsfiddle.net/rockon404/wgry1rv1/
Вам надо получить высоту внутреннего блока и использовать ее, а не auto.
Тогда анимация будет плавной.
Вместо animate можно использовать transition и просто писать высоту в стили.

Comments

[hollanditkzn]

Антон Спирин Совет спрошу, если мне захочется ускорить и не использовать полностью DOM а переписать все на react этот виджет. Будет тяжело?

[Антон Спирин]

hollanditkzn, если не знаете react то, наверное, да. Но поддерживать, модернизировать и масштабировать будет значительно легче.

[hollanditkzn]

Антон Спирин, Но надо с чего-то начинать

[Антон Спирин]

hollanditkzn, я столько в рефакторинга на чистом js и на React написал. Что скажу вам, что сложная логика которую на чистом js изменять боль и страдания, на React изменяется легко и быстро.

Answer 2

[aloky]

Зачем создавать каждый раз снова это?

<tr class="child"><td colspan="5"><div class="content"><div class="col-xs-6"><p>Имя: Радбя</p><p>Телефон: [phone]</p><p>email: </p><p>Пользователь: admin</p></div><div class="col-xs-6"><p>Информация: тиватитдвитваитвлтвадива</p></div><div class="col-xs-6"><p>Кол-во: 100</p><p>Приложение: нет</p><div class="col-xs-6"><p>Статус</p><p>Всего: 1000</p><p>Оплачено: 500</p></div></div></td></tr>

Comments

[hollanditkzn]

aloky Потому что это из ajax выводить все данные о заказе и рендериться в виде страницы. Просто это наглядно я показал так

[Игорь Воротнёв]

hollanditkzn, Посмотрите на Handlebars

[hollanditkzn]

Игорь Воротнёв, А что там? мне все равно надо будет брать данные из ajax и выводить все это в строку при нажатие. Не понял логику использовать другой шаблонизатор

[Игорь Воротнёв]

hollanditkzn, дык у вас сейчас шаблонизатора нет, а есть длиннющая строка. Handlebars упростит работу с повторяющимися элементами. Аяксом получаете чистые данные, а рендерите в нужном виде с помощью Handlebars.

[hollanditkzn]

Игорь Воротнёв, У меня просто на pug это все. Просто в примере не всунешь pug и даже ajax

[Игорь Воротнёв]

hollanditkzn, Понял.