2016-12-07 3 views
0

ребята.css3 переход при использовании toggleClass с jQuery не работает

Я пытаюсь создать складной контент с помощью jQuery. Я «почти» сделал это, но проблема в переходе. Коллапс применяется мгновенно, без переходов.

ps: Я пробовал другие элементы, как переключать, добавлять/удалятьClass, скрывать/показывать ... Любой из них работал.

Выше мой полный код в Pastebin:

http://pastebin.com/gw6Zm3Ey

+0

Вы не можете анимировать 'height', имея значение' auto', также отсутствует свойство 'переход', какое свойство транссистировать, как в' transition: height 0.75s linear' – LGSon

+0

@LGSon Я думаю, что если вы опустите значение свойства 'transition', оно по умолчанию будет' all', поэтому технически это не требуется, но рекомендуется. – zgood

+0

@zgood И использование 'all' также не рекомендуется, так как легко получить неожиданный результат, основанный на том, какие значения каждый браузер решает анимировать. – LGSon

ответ

1

Вы не можете анимировать в height:auto; вам нужно будет установить статическую высоту перехода к (вам также необходимо удалить overflow: visible;, или ESE все становится видно, как только этот класс применяется - вы не можете анимировать переполнение).

Вот demo fiddle

Чтобы решить эту проблему, люди обычно используют JQuery-х slideToggle(), который будет динамически получить высоту, то оживить его. Я бы посмотрел на то, что

Смежные вопросы