Мобильная версияПочему внутренний элемент не переходит? ⇐ CSS
-
Гость
Почему внутренний элемент не переходит?
При одновременном изменении свойств display и opacity с применением перехода к opacity я ожидаю, что переход будет быть видимым до тех пор, пока элемент не имеет display: none. Но, похоже, это не так.
Посмотрите следующий фрагмент и обратите внимание, что при наведении на внешний элемент мгновенно появляется внутренний элемент:
.outer { положение: относительное; высота: 10рем; ширина: 10рем; фон: синий; белый цвет; } .внутренний { позиция: абсолютная; вставка: 2,5рем; фон: голубой; дисплей: нет; непрозрачность: 0; переход: непрозрачность 1с, легкость; } .outer:hover .inner { дисплей: блок; непрозрачность: 1; Наведите на меня
Я уже знаю, что display не является анимируемым свойством. Поэтому, даже если бы я включил его в переход, я бы ожидал, что он применится мгновенно при наведении курсора, несмотря ни на что.
Однако я знаю, что opacity является анимируемым свойством. Таким образом, при наведении курсора внутренний элемент имеет display: block, а свойство opacity должно плавно переходить от 0 к 1. Это не так. нет.
(При снятии курсора внутренний элемент немедленно получает display: none, поэтому времени на переход в другом направлении нет.)
Почему внутренний элемент не переходит?
При одновременном изменении свойств display и opacity с применением перехода к opacity я ожидаю, что переход будет быть видимым до тех пор, пока элемент не имеет display: none. Но, похоже, это не так.
Посмотрите следующий фрагмент и обратите внимание, что при наведении на внешний элемент мгновенно появляется внутренний элемент:
.outer { положение: относительное; высота: 10рем; ширина: 10рем; фон: синий; белый цвет; } .внутренний { позиция: абсолютная; вставка: 2,5рем; фон: голубой; дисплей: нет; непрозрачность: 0; переход: непрозрачность 1с, легкость; } .outer:hover .inner { дисплей: блок; непрозрачность: 1; Наведите на меня
Я уже знаю, что display не является анимируемым свойством. Поэтому, даже если бы я включил его в переход, я бы ожидал, что он применится мгновенно при наведении курсора, несмотря ни на что.
Однако я знаю, что opacity является анимируемым свойством. Таким образом, при наведении курсора внутренний элемент имеет display: block, а свойство opacity должно плавно переходить от 0 к 1. Это не так. нет.
(При снятии курсора внутренний элемент немедленно получает display: none, поэтому времени на переход в другом направлении нет.)
Почему внутренний элемент не переходит?
