Css transition display не работает

Анимация от display: block до display: none

Дата публикации: 2013-12-24

От автора: Вы, возможно, уже знаете, что переходы и анимация CSS3 позволяют анимировать специальный набор свойств CSS. Одно из тех свойств, которые нельзя анимировать – display.

Отлично было бы это сделать, но на данный момент это невозможно и, думаю, никогда не станет реальностью (например, как анимировать до “display: table”?). Но есть возможность совершить обходной маневр, и один из них я здесь и опишу.

Зачем анимировать “display”?

Анимировать свойство display требуется для решения следующей проблемы:

Нужно, чтобы элемент постепенно зрительно исчезал со страницы.

Вам нехочется, чтобы этот элемент занимал место после своего исчезновения (например, требуется, чтобы его исчезновение вызывало перезаливку).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Нужно применять для анимации CSS, а не библиотеку.

По этой причине недостаточно просто анимировать opacity до нуля, так как элемент с нулевой непрозрачностью занимает то же самое место на странице. Давайте посмотрим, как шаг за шагом решить эту проблему.

Используйте Opacity и Display

Первое, о чем вы можете подумать – воспользоваться и свойством opacity, и display. Наш HTML будет выглядеть так:

Обратите внимание на то, что display: none и opacity: 0 присвоен класс “hidden”. Если переключать класс “hidden” с помощью jQuery, получится примерно такой код:

Но если так сделать, то мы не увидим эффекта перехода (определенного в блоке описаний .box). Вместо него мы увидим это (слегка отличающееся в Firefox по сравнению с Chrome/IE10):

Многократно нажмите кнопку ‘togglevisibility’ и увидите, как блок безо всяких переходов будет неожиданно исчезать и появляться. Чтобы это исправить, можно попробовать отделить в CSS свойство display от opacity:

Затем можно переключить оба класса, один за другим:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Помимо того, что требуется реверсировать эти две строки при появлении блока, это еще и не сработает, как видно здесь:

Нам нужно, чтобы элемент визуально исчезал, а затем удалялся со страницы по окончанию исчезновения идентично функции обратного вызова. (Кроме того, даже если мы скомбинируем opacity: 0 с visibility: hidden, то анимация получится хорошо, но элемент после своего исчезновения продолжит занимать место на странице, так что все это не сработает.)

Почему не работает?

До перехода к своему методу я просто объясню, почему невозможно ничего сделать, просто изменяя классы один за другим. Во-первых, если вы добавляете классы как в вышеприведенных примерах, и если переход даже сработал, то вам придется установить отдельный раздел для удаления классов и реверсирования (т.е. если блок сначала скрыт, вам придется установить его на display: block, а затем сменить непрозрачность).

Но это несущественно, потому что все равно не работает. JavaScript выполняет одну строку за другой, но не ждет, пока закончат выполняться все связанные с ней процессы, а переходит к выполнению следующей строки. (Другими словами, если в строке 1 вы выполняете анимацию или другое несинхронное событие, строка 2 будет исполняться, даже если анимация не выполнена).

Это происходит от того, что непрозрачность ‘opacity’ пытается анимироваться сразу же, и даже если на долю миллисекунды она действительно анимируется, вы этого не увидите, потому что display: none начнет действовать столь же быстро.
Можно резюмировать проблему, которую нам нужно решить, следующим образом:

Когда элемент виден, сначала анимируйте непрозрачность, а затем, когда это выполнено, сделайте его display: none.

Когда элемент невидим, сначала сделайте его display: block, затем (пока он еще визуально скрыт, но уже существует на странице), анимируйте непрозрачность.

Возможное решение

Вероятно, существуют другие способы это сделать, и я буду рад узнать, как вы бы решили эту проблему. Но вот мое мнение.
CSS тот же самый (с двумя все еще разделенными классами ‘hidden’), но jQuery будет выглядеть так:

Источник

Не работает свойство transition?

Добрый день. При наведении на фото должен срабатывать transition. То есть плавно появляться фон и текст.

Скрытый текст:
.about-text <
display: none;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 15px;
position: absolute;
top: 0;
bottom: 0;
transition: 1s;
>

При наведении:
.about-item:hover .about-text <
background: rgba(0, 0, 0, 0.75);
display: flex;
>

• Вопрос задан более трёх лет назад
• 298 просмотров

Оценить 1 комментарий

Есть «дискретные*» свойства. Те, значения которых могут принимать ограниченное число вариантов, они как правило обозначены специальными словами. Например, свойство display может принимать значения none, block, inline и т.д. Свойство text-decoration — none, underline, line-through и т.д. К таким свойствам нельзя применить плавный переход (transition) из одного состояния в другое, потому что между этими состояниями нет промежуточных значений. То же самое относится к свойству z-index, он не может принимать дробных значений, background-image — картинка или есть или ее нет, или она просто сменяется на другую.
Напротив «недискретные» свойства могут плавно перетекать из одного состояния в другое. Преимущественно они заданы числом. Сюда же относится цвет, потому что цвет — это тоже число. Примеры таких свойств: left, width, background-position, font-size и т.д.

Запомните это, и не пытайтесь анимировать «дискретные» свойства.

* «дискретные» — мой термин, я не знаю как правильно их называть.

transition с display не работает
используйте для скрытия:

Источник

CSS3 transition doesn’t work with display property [duplicate]

I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.

So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.

Here is my Code:

Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!

7 Answers 7

display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility ; you can’t expect a block to be half hidden which, by definition, would be visible ! Fortunately, you can use opacity for fading effects instead.
— reference

As an alternatiive CSS solution, you could play with opacity , height and padding properties to achieve the desirable effect:

(Vendor prefixes omitted due to brevity.)

Here is a working demo. Also here is a similar topic on SO.

You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.

Sorry I couldn’t comment, my rep isn’t high enough.

I found a solution while tinkering around.

People who directly wanna see the results:

Below is the code:

HTML

CSS

JS

Please let me know whether there is any problem with this solution ‘coz I feel there would be no restriction of max-height with this solution.

I faced the problem with display:none

I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here

The obvious was to wrap those hidden animated bars in a div then toggle that element’s height and opacity

The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements

so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.

So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.

Источник

Css transition display не работает

Как это должно работать:

1) Изначально анимируемый элемент виден

2) Когда пользователь жмет «Спрятать», изменяются два свойства: display:none, opacity:0. Конечно, здесь анимации быть не должно, так как display сработает мгновенно (элемент сразу же исключается из потока), а анимируемый opacity останется за сценой. Но здесь так и должно быть, мне так и надо.

3) Когда же пользователь жмет «Показать», обратно меняются два свойства: display:block, opacity:1. А вот здесь анимация работать должна, так как display:block работает сразу (элемент сразу же включается в поток) и opacity должен анимироваться беспрепятственно.

По логике работать должно, но в соответствии с моим описанием работают только Opera 11.6x и IE10PP5. Opera 12 (последняя тестовая сборка), Google Chrome и Firefox почему-то не хотят анимировать fadeIn.

По идее эта проблема должна быть широко известной, однако беглый гуглинг в русских Интернетах и поиск на этом форуме (привет, psywalker!) результатов не дал.

Итого, вопросы такие:

1) Почему не работает согласно описанию в большинстве браузеров? Может где-то в стандартах такое поведение предписано? Или это просто баг Хрома и Лисички, под который потом подстроилась Опера? (Помню, что-то в этом духе писали в блоге разработчиков Оперы)

2) Как же иначе можно реализовать идею, не отступая от идеи использования CSS Transition? (Анимация на чистом JS крайне медлительна)

Источник

Поделиться

doctor Brain

мир глазами веб-разработчика

Анимация элементов с display:none и callback функции

Учимся делать корректную анимацию появления элемента на странице

время чтения 3 мин.

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

Почему мы так поступаем? Потому что это не требует никаких усилий. jQuery позаботился даже о том, чтобы у нас была возможность вызвать callback-функцию после анимации:

Это очень быстро и эффективно. Но, к сожалению, появляется проблема: вся анимация, которую предлагает jQuery, в конечном счете является чистым JavaScript кодом, без малейшей примеси CSS.

Хороший frontend-разработчик должен знать, что переходы и анимации должны находиться в зоне ответственности CSS. Только так можно добиться лучшей производительности. Функции jQuery: .hide() , .show() , .toggle() , .fadeIn() , .slideUp() не рекомендуются к использованию.

CSS переходы (transition)

Использование универсального CSS-свойства transition является верным подходом. Все что нужно сделать — это добавить класс с нужным свойством элементу:

Тем не менее использование свойства transition связано с двумя проблемами:

Проблема 1

Как использовать callback-функции после transition?

Тут есть маленькая хитрость, а именно: событие transitionend (подробно спецификацию можно прочитать тут и тут:

Теперь callback-функции доступны после любой анимации.

Проблема 2

Как сделать анимацию для элемента с исходным свойством display:none

Анимация для скрытого объекта — насущная проблема. Например, если мы добавим класс с нужными свойствами к такому элементу и используем transition, ничего не произойдет.

Такой код не будет работать:

Это происходит потому, что элемент не отрисован и не занимает места на экране, а это является обязательным условием для его анимации. То есть transition для элемента с display:none не работает.

Метод Reflow

Для начала, нужно разобраться с терминами repaint и reflow. Если коротко:

repaint вызывается при изменениях, связанных с внешним видом элементов. Эти изменения не затрагивают размеры объекта и его положение на экране. Например, это могут быть CSS-свойства opacity , outline , background-color .

reflow вызывается при изменении размеров элемента. В свою очередь это приводит к перерасчету макета страницы и дальнейшему обновлению экрана уже с учетом изменений.

По этой причине, для того, чтобы добавить анимацию элементу с исходным свойством display:none , нужно форсировать reflow. Как это сделать? Добавим элементу класс со свойством display:block и вызовем метод, возвращающий размеры элемента. Для определения размеров браузер будет вынужден обновить элемент и форсировать запуск reflow. После запуска reflow элемент уже занимает место на экране и выполнение анимации с помощью transition становится возможным.

Источник