JS \ CSS - アニメーションのないポップアウトやポップインの画像

Question

opacityプロパティで再生しているJS \ CSSを使って\ outエフェクトを作成しようとしています。画像は、目的の効果なしにポップインまたはポップアウトするだけです。私は何が間違っているのか分からない。 jsfiddle。 JS：

document.getElementById("in").addEventListener("click", function() { 
    var img = document.createElement('img'); 
    img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg"; 
    img.setAttribute("id", "dt"); 
    document.getElementById("frame").appendChild(img); 
    img.className = "fadein"; 
    console.log("sould fade in"); 
}); 

document.getElementById("out").addEventListener("click", function() { 
    console.log("sould fade out"); 
    var img = document.getElementById("dt"); 
    img.className = "fadeout"; 
    console.log(img); 
    img.remove(); 
}); 

はCSS：

#frame img { 
    opacity: 0; 
    -moz-transition: opacity 2s; 
    /* Firefox 4 */ 
    -webkit-transition: opacity 2s; 
    /* Safari and Chrome */ 
    -o-transition: opacity 2s; 
    transition: all 1s ease; 
    width: 350px; 
    margin: auto; 
} 

.fadein { 
    opacity: 1 !important; 
    transition: all 1s ease !important; 
} 

.fadeout { 
    opacity: 0 !important; 
} 

HTML：

<div id="frame"></div> 

<button id="in">fade in</button> 
<button id="out">fade out</button> 

Answer 1

document.getElementById("in").addEventListener("click", function() { 
 
    var img = document.createElement('img'); 
 
    img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg"; 
 
    img.setAttribute("id", "dt"); 
 
    document.getElementById("frame").appendChild(img); 
 
    img.className = "fadein"; 
 
    console.log("sould fade in"); 
 
}); 
 

 

 
document.getElementById("out").addEventListener("click", function() { 
 
    console.log("sould fade out"); 
 
    var img = document.getElementById("dt"); 
 
    img.className = "fadeout"; 
 
    console.log(img); 
 
    img.remove(); 
 
});

#frame img { 
 
    opacity: 0; 
 
    -moz-transition: opacity 2s; 
 
    /* Firefox 4 */ 
 
    -webkit-transition: opacity 2s; 
 
    /* Safari and Chrome */ 
 
    -o-transition: opacity 2s; 
 
    transition: all 1s ease; 
 
    width: 350px; 
 
    margin: auto; 
 
} 
 

 
.fadein { 
 
    opacity: 1 !important; 
 
    animation-name: fadeInOpacity; 
 
    animation-iteration-count: 1; 
 
    \t animation-timing-function: ease-in; 
 
    animation-duration: 2s; 
 
} 
 

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
} 
 

 
.fadeout { 
 
    opacity: 0 !important; 
 
    animation-name: fadeInOpacity; 
 
    animation-iteration-count: 1; 
 
    \t animation-timing-function: ease-in; 
 
    animation-duration: 2s; 
 
}

<div id="frame"></div> 
 

 
<button id="in">fade in</button> 
 
<button id="out">fade out</button>

Answer 2

新しい要素がappendeですdをDOMに渡すと、ブラウザのレイアウトエンジンはディメンションを計算しており、要素をビューコンテキストにペイントしています。エレメントにトランジションを割り当てる前に少し遅れている必要があります。したがって、setTimeoutの中にCSSクラスの割り当てをラップすると、うまくいくはずです。このように：

document.getElementById("in").addEventListener("click", function() { 
    var img = document.createElement('img'); 
    img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg"; 
    img.setAttribute("id", "dt"); 
    document.getElementById("frame").appendChild(img); 
    setTimeout(() => img.className = "fadein", 100); 
}); 

あなたのホストマシンのブラウザと馬力に応じて、範囲[0、100]にタイムアウト値を微調整する必要があるかもしれません。

あなたのCSSでtransition-propertyにallを割り当てていることがわかります。これは、.fadeInまたは.fadeOutのCSSクラスを持つエレメント上のすべてのCSSプロパティの遷移を最適化するようブラウザに強制するため、高価です。

Answer 3

場所img globel

var img = document.createElement('img'); 
 
    img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg"; 
 
    img.setAttribute("id", "dt"); 
 
    document.getElementById("frame").appendChild(img); 
 
    
 
document.getElementById("in").addEventListener("click", function() { 
 
    img.className = "fadein"; 
 
    console.log("sould fade in"); 
 
}); 
 

 
document.getElementById("out").addEventListener("click", function() { 
 
    console.log("sould fade out"); 
 
    
 
    img.className = "fadeout"; 
 
    
 
    
 
    console.log(img); 
 
    
 
});

#frame img { 
 
    
 
    opacity: 0; 
 
    -moz-transition: opacity 2s; 
 
    /* Firefox 4 */ 
 
    -webkit-transition: opacity 2s; 
 
    /* Safari and Chrome */ 
 
    -o-transition: opacity 2s; 
 
    transition: all 1s ease; 
 
    width: 350px; 
 
    height:0; 
 
    margin: auto; 
 
} 
 

 
.fadein { 
 
height:auto !important; 
 
    opacity: 1 !important; 
 
    transition: all 1s ease !important; 
 
} 
 

 
.fadeout { 
 
    
 
    opacity: 0 !important; 
 
}

<div id="frame"></div> 
 

 
<button id="in">fade in</button> 
 
<button id="out">fade out</button>

のエレメントを作成