Есть элемент со свойством display: none. По клику на определенную кнопку, к этому элементу прикрепляется класс со свойством display: block. Вопрос: можно ли это сделать плавно, через transition как-то, например. Просто вот все отлично работает, если я меняю свой-во не display, а visibility соответственно, тогда можно спокойно плавно менять opacity, transform и т.д и делать это плавно через transition. Но со свойством display у меня уже это все не работает. В общем, думаю нормально объяснил, спасибо заранее.
Дмитрий: прошу меня простить, что наглею, но вы могли бы это, в том же коде, реализовать посредством добавления класса CSS (так как у меня куча преобразований различных, трансформаций и т.д и через jQuery это передавать.... ну такое)
Дмитрий зачем animate? есть метод $('div').fadeIn(2000); результат тот же. Но автору нужна реализация на CSS как я понимаю. Из-за display или того же visibility у вас ничего не выйдет, плавности не увидите. jsfiddle.net/9z516p73/1
Джон Голт: если вам надо менять именно класс, то как говорят остальные и Андрей Б. - это не получится. Точнее вы можете поставить другой класс после окончания анимации. Но плавно изменить - пожалуй не выйдет. Ищите, крутитесь.
Не выйдет, никак. Точно так же как visibility и float. Все что влияет на поток документа неможет быть анимировано.
Решение: сначала делаем класс hide с opacity 0, у стиля элемента ставим транзишен на opacity. Затем, по окончанию анимации (из js отлавливаем событие) выставляем display:none или вовсе удаляем из DOM. То же самое в обратном порядке для анимированного возникновения: сначала вставляем в DOM и потом уже анимируем.
Средний
Средний
