Переход CSS из `display: none` при изменении класса?

Я начал использовать переходы для "модернизации" ощущения сайта. Пока что переходы :hover работают отлично. Теперь мне интересно, можно ли инициировать переход на основе других вещей, например, когда класс изменяется.

Вот соответствующий CSS:

#myelem {
    opacity: 0;
    display: none;
    transition: opacity 0.4s ease-in, display 0.4s step-end;
    -ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease-out, display 0.4s step-start;
    -ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}

JavaScript для запуска изменения:

document.getElementById('myelem').className = "show";

Но переход, похоже, не происходит - он просто перескакивает из одного состояния в другое.

Что я делаю неправильно?

Ответ 1

Он работает, когда вы удаляете свойства display.

#myelem {
    opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
}

JSFiddle.

Причиной этого является то, что могут быть перенесены только свойства CSS с числами. Как вы думаете, "50% -ное состояние" должно быть между "display: none;" и "display: block;"? Поскольку это невозможно вычислить, вы не можете анимировать свойство display.

Ответ 2

Вы не можете использовать свойство display для перехода между состояниями.

Ответ 3

Ответ, предоставленный @MarcoK, включая комментарии, показывает уже правильное направление. Установка свойства display препятствует transition.

Лучшая практика заключается в том, чтобы поместить версию без префикса (стандартов) после того, как префиксные браузеры-поставщика были использованы для обеспечения будущего. Последние свойства перезаписывают первый.
Другие улучшения:

Как отметил @Charmander, -ms-transition не поддерживается никаким обозревателем Internet Explorer
Кроме того, разработчик Opera префикс -o-transition для Op 10.5-12 и Op Mobile 10-12, который в настоящее время, вероятно, поддерживается меньше, чем .1% глобального браузера. Я положу его для завершения.

CSS

#myelem {
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
       -moz-transition: opacity .4s ease-in;
         -o-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
}
#myelem.show {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;
}

Ответ 4

Можно анимацию показать и скрыть элементы в css, а не:

display: none;

/* and */

display: block;

использование:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

Поскольку вы заменяете эти свойства, вы можете анимировать любое значение css с помощью transition.

рабочий пример: https://jsfiddle.net/utyja8qx/