Я знаю, це насправді не є рішенням для вашого питання, тому що ви просите
дисплей + непрозорість
Мій підхід вирішує більш загальне питання, але, можливо, це була фонова проблема, яку слід вирішити, використовуючи display
в поєднанні з opacity
.
Моє бажання було звести Елемент зі шляху, коли його не видно. Це рішення робить саме це: воно переміщує елемент геть, і це може бути використано для переходу:
.child {
left: -2000px;
opacity: 0;
visibility: hidden;
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}
.parent:hover .child {
left: 0;
opacity: 1;
visibility: visible;
transition: left 0s, visibility 0s, opacity 0.8s;
}
Цей код не містить префіксів веб-переглядача та зламів зворотної сумісності. Це просто ілюструє концепцію переміщення елемента, оскільки він більше не потрібен.
Цікавою частиною є два різних визначення переходу. Коли вказівник миші наводить .parent
елемент, .child
елемент потрібно негайно поставити на місце, а потім непрозорість буде змінено:
transition: left 0s, visibility 0s, opacity 0.8s;
Коли немає наведення курсору або вказівник миші був переміщений з елемента, потрібно почекати, поки зміна непрозорості не закінчиться, перш ніж елемент можна буде перемістити з екрана:
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
Перенесення предмета буде життєздатною альтернативою у випадку, коли обстановка display:none
не порушить макет.
Сподіваюся, я вдарив цвях у голову за це запитання, хоча і не відповів на нього.