Czy istnieje obejście CSS-only (czystego CSS) do wprowadzania i zanikania obiektów z wyświetlaczem: brak?

Question

Wiem, że efekt można łatwo osiągnąć dzięki jQuery hide(). Celem jest wykonanie tego za pomocą czystego CSS. Wynik zanikania musi mieć display:none, więc element zajmuje zero miejsca na układzie strony (więc visibility:hidden nie jest opcją).

mam sukces na popełnił blaknięcie w życie z czystym CSS na obiekt display:none za pomocą kawałka animation zamiast transition, ale nie mogłem zrobić to praca na blaknięcie-out bez używać javascript setTimeout metody.

Oto co mam do tej pory:

function aaa(){ 
 
document.getElementById("b").style.display = "inline-block"; 
 
} 
 

 
function bbb(){ 
 
setTimeout(function(){ document.getElementById("b").style.display = "none"; }, 1000); 
 
}

#b { 
 
    display: none; 
 
    opacity: 0; 
 
    -webkit-transition: all 1s; /* Safari */ 
 
    transition: all 1s; 
 
    background: skyblue; 
 
} 
 

 
#a:hover ~ #b { 
 
    opacity: 1; 
 
    -webkit-animation: animate 1s; /* Chrome, Safari, Opera */ 
 
    animation: animate 1s; 
 
} 
 

 
@keyframes animate { 
 
    0% {opacity: 0;} 
 
    100% {opacity: 1;} 
 
} 
 

 
div { 
 
    width: 58px; 
 
    height: 58px; 
 
    vertical-align: middle; 
 
    border: 1px solid black; 
 
    line-height: 58px; 
 
    text-align: center; 
 
} 
 

 
#a { 
 
    background: tomato; 
 
} 
 

 
#c { 
 
    background: greenyellow; 
 
}

<div id=a onmouseenter="aaa()" onmouseleave="bbb()">OVER</div> 
 
<div id=b>B</div> 
 
<div id=c>C</div>

Czy to możliwe, aby osiągnąć ten sam rezultat zerowej JavaScript?

codepen DEMO

Answer 1

LGSon Jak przedstawiono na uwagi (i później na odpowiedź), jako alternatywa dla display:none jest height:0 połączeniu z overflow:hidden.

Użyłem tej metody razem z wartościami krycia na klatkach kluczowych/przejściu, aby odtworzyć efekty pojawiania się/zanikania fragmentu kodu OP, ale bez żadnego javascriptu.

transition-timing-function: cubic-bezier użyto, aby wykonać szybki skok do height:0

#b { 
 
    overflow: hidden; 
 
    height: 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 1s, height 1s cubic-bezier(1,0,1,0); /* Safari */ 
 
    transition: opacity 1s, height 1s cubic-bezier(1,0,1,0); 
 
    background: skyblue; 
 
} 
 

 
#a:hover ~ #b { 
 
    opacity: 1; 
 
    height: 60px; 
 
    -webkit-animation: animate 1s; /* Chrome, Safari, Opera */ 
 
    animation: animate 1s; 
 
    height: 60px; 
 
} 
 

 
@keyframes animate { 
 
    0% {opacity: 0; 
 
    height: 60px;} 
 
    100% { opacity: 1; 
 
    height: 60px;} 
 
} 
 

 
div { 
 
    width: 58px; 
 
    height: 58px; 
 
    vertical-align: middle; 
 
    outline: 1px solid black; 
 
    line-height: 60px; 
 
    text-align: center; 
 
} 
 

 
#a { 
 
    background: tomato; 
 
} 
 

 
#c { 
 
    background: greenyellow; 
 
}

<div id=a>OVER</div> 
 
<div id=b>B</div> 
 
<div id=c>C</div>

Answer 2

Niestety, odpowiedź brzmi 'nie'. Możesz użyć krycia do animacji wejścia/wyjścia za pomocą tylko css, ale zmiana ekranu nie ma przejścia.

Jeśli twój div zawiera tylko tekst, możesz to zrobić za pomocą rozmiaru czcionki.

Jeśli istnieją wewnętrzne elementy div lub obrazy o określonych wymiarach, należy je wyraźnie zasygnalizować, zmieniając ich szerokość/wysokość w ukrytym elemencie div, co oznacza, że ​​wiesz, co jest w html podczas tworzenia css.

Answer 3

jak nie można animować display: none z CSS tylko, tutaj jest alternatywą przy użyciu height

#b { 
 
    height:0; 
 
    transition: 1s; 
 
    overflow: hidden; 
 
    background: skyblue; 
 
} 
 

 
#a:hover ~ #b { 
 
    height: 58px; 
 
} 
 

 
div { 
 
    width: 58px; 
 
    height: 58px; 
 
    vertical-align: middle; 
 
    border: 1px solid black; 
 
    line-height: 58px; 
 
    text-align: center; 
 
} 
 

 
#a { 
 
    background: tomato; 
 
} 
 

 
#c { 
 
    background: greenyellow; 
 
}

<div id=a>OVER</div> 
 
<div id=b>B</div> 
 
<div id=c>C</div>

Jeśli potrzebujesz height: auto, można użyć max-height tak

#b { 
 
    max-height:0; 
 
    padding: 0px 0; 
 
    transition: 0.5s ease-in-out; 
 
    overflow: hidden; 
 
    background: skyblue; 
 
} 
 

 
#a:hover ~ #b { 
 
    max-height: 150px; 
 
    padding: 20px 0; 
 
    transition: 0.8s ease-in-out; 
 
} 
 

 
div { 
 
    width: 58px; 
 
    height: auto; 
 
    padding: 20px 0; 
 
    vertical-align: middle; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 

 
#a { 
 
    background: tomato; 
 
} 
 

 
#c { 
 
    background: greenyellow; 
 
}

<div id=a>OVER</div> 
 
<div id=b>B</div> 
 
<div id=c>C</div>