Przejścia na wyświetlaczu: właściwość
Obecnie projektuję rodzaj menu rozwijanego CSS "mega dropdown" - w zasadzie zwykłe menu rozwijane tylko dla CSS, ale takie, które zawiera różne rodzaje treści.
W tej chwili wygląda na to, że przejścia w CSS3 nie mają zastosowania do właściwości "display" , tzn. nie można wykonać żadnego przejścia z display: none
do display: block
(ani żadnej kombinacji).
Czy ktoś może wymyślić sposób, aby menu drugiego poziomu z powyższego przykładu "zniknęło", gdy ktoś najedzie na jeden z najwyższych poziomów menu?
Wiem, że możesz używać przejść na właściwości visibility:
, ale nie mogę wymyślić sposobu na efektywne wykorzystanie tego.
Próbowałem również używać wysokości, ale to po prostu nie powiodło się.
Jestem również świadomy, że osiągnięcie tego za pomocą JavaScript jest trywialne, ale chciałem rzucić sobie wyzwanie, aby użyć tylko CSS i myślę, że nadchodzę trochę za krótko.
Wszystkie i wszelkie sugestie mile widziane.3 answers
Możesz połączyć dwa przejścia lub więcej, i visibility
jest Tym razem przydatne.
div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
(nie zapomnij przedrostków sprzedawcy do Właściwościtransition
)
Więcej szczegółów znajduje się w w tym artykule
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-23 20:04:35
Musisz ukryć element w inny sposób, aby to zadziałało.
Osiągnąłem ten efekt, ustawiając oba <div>
absolutnie i ustawiając Ukryty na opacity: 0
.
Jeśli nawet przełączysz właściwość display
z none
na block
, przejście na innych elementach nie nastąpi.
Aby to obejść, zawsze pozwól elementowi być display: block
, ale Ukryj element, dostosowując dowolny z tych środków:
- Ustaw
height
na0
. - Ustaw
opacity
na0
. - umieść element poza ramką innego elementu, który ma
overflow: hidden
.
Jest prawdopodobnie więcej rozwiązań, ale nie możesz wykonać przejścia, jeśli przełączysz element na display: none
. Na przykład możesz spróbować czegoś takiego:
div {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
Ale to zadziała. Z doświadczenia wiem, że to nic nie da.
Z tego powodu zawsze będziesz musiał zachować element display: block
- ale można to obejść robiąc coś takiego:
div {
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
div.active {
opacity: 1;
height: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-26 09:57:55
W czasie tego postu wszystkie główne przeglądarki wyłączają przejścia CSS, jeśli spróbujesz zmienić właściwość display
, ale animacje CSS nadal działają dobrze, więc możemy ich używać jako obejścia.
Przykładowy kod: - (Możesz zastosować go odpowiednio do swojego menu) Demo
Dodaj następujący CSS do swojego arkusza stylów:-
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Następnie zastosuj animację {[3] } do dziecka po najechaniu kursorem na rodzica: - (i oczywiście ustaw display: block
)
.parent:hover .child {
display: block;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-10 14:54:30