更改顯示時不能播放動畫

Question

我想製作動畫，但並不流暢。當我刪除顯示 - 一切正常。如何處理顯示和順利？

div { 
 
    display: none; 
 
    opacity: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: opacity 3s; 
 
    background-color: black; 
 
} 
 

 
input:checked + div { 
 
    display: block; 
 
    opacity: 1; 
 
}

<input type="checkbox"> 
 

 
<div></div>

Answer 1

嘗試visibility & position，而不是display

div { 
 
    opacity: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: all 3s; 
 
    background-color: black; 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
input:checked+div { 
 
    visibility: visible; 
 
    position: relative; 
 
    opacity: 1; 
 
}

<input type="checkbox"> 
 

 
<div></div><span>&lt;space&gt;</span>

Answer 2

HTML

<input type="checkbox" name="name" id="name" /> 

<div id="animation"> 
    test 
</div> 

JQuery的

$('#animation').hide(); 

$('#trending').click(function(){ 
    $('#animation').fadeToggle(); 
}) 

Answer 3

我認爲你需要這個

div {width: 50px; 
 
    height: 50px; 
 
    background-color: black; 
 
    visibility:hidden; 
 
    opacity:0; 
 
    transition:all 0.45s; 
 
} 
 

 
input:checked + div { 
 
opacity: 1; 
 
visibility: visible; 
 
}

<input type="checkbox"> 
 
<div></div>

Answer 4

HTML

<input type="checkbox" id="toggle"> 
<div class="overlay"> 
    <label for="toggle">Click to deactivate</label> 
</div> 

CSS

label { 
    cursor: pointer; 
} 
.overlay { 
    opacity: 0; 
    transition: opacity ease-in 0.6s; 
} 
#toggle:checked ~ .overlay { 
    opacity: 1; 
}