JS \ CSS - 图像只是弹出或popin没有动画

Question

我想创建使用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，浏览器布局引擎正忙于计算维度并将元素绘制到视图上下文中。在为元素分配转换之前，必须稍微延迟一段时间。所以，如果你将这个CSS类的任务包装在setTimeout里，你会没事的。就像这样：

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>

的元素