Transition не работает для display

Не работает свойство 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;
>

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

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

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

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

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

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 будет выглядеть так:

Источник

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.

Источник

Почему не работает transition у высоты, заданной в процентах?

Почему пропадет transition при указании % соотношения?

Если указать height: 500px работает плавный переход, если указать height: 100% раскрытие проходит мгновенно.

Подскажите почему и как правильно изменить код.

3 ответа 3

В твоём коде 100% на самом деле означают auto , поскольку у контейнера не задана высота.

Если её задать, то плавное разворачивание будет.

Понял, как сделать, чтобы transition заработал без указания высоты.

Пусть высота всегда будет auto, а изменяется максимальная высота:

Хотя это не совсем так работает, как надо. Анимируется весь диапазон max-height, а не высота.

Свойство height относится к свойствам, которые лучше не анимировать, потому что анимировать желательно всего два свойства — opacity и transform .

При анимации height браузер начинает перерасчитывать макет, а значит на каждом фрейме анимации будет вызвана перерисовка. Чтобы этого избежать, в нашем случае, будем анимировать transform .

Для начала, необходимо вынести объект, который будем анимировать, в отдельный композиционный слой — это делается при помощи will-change: transform или по-старинке transform: translateZ(0) . А после этого уже можно воспользоваться трюком с transform: scaleY(0) / scaleY(1) .

Самостоятельно разницу можно пощупать в Developer Tools → Console → esc → Rendering → Paint Flashing.

Источник

Анимация от 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 будет выглядеть так:

Источник