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

我正在尝试使用JS\CSS和

opacity

属性创建淡入淡出效果。图像只是在没有预期效果的情况下弹出或弹出。不知道我做错了什么。 . JS:

CSS:

HTML:

淡入
淡出

document.getElementById（“in”）.addEventListener（“单击”，函数）（）{
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”；
控制台日志（“sould淡入”）；
});
document.getElementById（“out”）.addEventListener（“单击”，函数（）{
console.log（“sould淡出”）；
var img=document.getElementById（“dt”）；
img.className=“淡出”；
控制台日志（img）；
img.remove（）；
});
#帧img{
不透明度：0；
-moz转变：不透明度2s；
/*火狐4*/
-webkit转换：不透明度2s；
/*狩猎与铬*/
-o-转变：不透明度2s；
过渡：所有的1容易；
宽度：350px；
保证金：自动；
}
法丹先生{
不透明度：1！重要；
动画名称：fadeInOpacity；
动画迭代次数：1；
动画计时功能：轻松自如；
动画持续时间：2秒；
}
@关键帧FadeInCapacity{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.淡出{
不透明度：0！重要；
动画名称：fadeInOpacity；
动画迭代次数：1；
动画计时功能：轻松自如；
动画持续时间：2秒；
}

淡入
淡出
当一个新元素附加到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);
});

根据浏览器和主机的马力，您可能需要在[01100]范围内调整超时值

我看到您将
transition属性
指定给CSS中的
all
。请知道，这是非常昂贵的，因为它迫使浏览器在使用
.fadeIn
或
.fadeOut
CSS类的元素上优化所有CSS属性的可能转换。
放置
img
globel的create元素


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（“单击”，函数）（）{
img.className=“fadein”；
控制台日志（“sould淡入”）；
});
document.getElementById（“out”）.addEventListener（“单击”，函数（）{
console.log（“sould淡出”）；
img.className=“淡出”；
控制台日志（img）；
});
#帧img{
不透明度：0；
-moz转变：不透明度2s；
/*火狐4*/
-webkit转换：不透明度2s；
/*狩猎与铬*/
-o-转变：不透明度2s；
过渡：所有的1容易；
宽度：350px；
身高：0；
保证金：自动；
}
法丹先生{
高度：自动！重要；
不透明度：1！重要；
过渡：所有1轻松！重要；
}
.淡出{
不透明度：0！重要；
}

淡入
淡出
#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;
}

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

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

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);
});