0

Есть 2 div

<din class="div1"></din>
<din class="div2"></din>

css:

.div1 {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    height: 100px;
    width: 100px;
}

.div2 {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    height: 100px;
    width: 100px;
    display: none;
}

.active {
    opacity: 1;
    display: block;
    transition: opacity 1s;
}

Для надежности (старые браузеры) я по мимо opacity добавляю ещё и display: none;, но это ломает анимацию и блок появляется резко, как такое исправить?

http://jsfiddle.net/sqjr1dvy/

1
  • убрать display:none; старые браузеры переживут, поверь
    – invited
    7 ноя 2015 в 19:52

1 ответ 1

1

Анимация не работает со свойством display, используйте другие свойства, например visibility и opacity.

1
  • Но ведь transition относится только к opacity, я же не пишу transition: all, что ему не нравится?
    – Fangog
    8 ноя 2015 в 16:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.