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.
Author: Brian Burns, 0000-00-00
Source

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

 1058
Author: Guillermo,
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:

  1. Ustaw height na 0.
  2. Ustaw opacity na 0.
  3. 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;
}
 678
Author: Jim Jeffers,
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;
}
 208
Author: dippas,
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