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

Question

我正在尝试使用JS \ CSS和opacity属性一起创建淡出效果。图像只是弹出或弹出而没有所需的效果。无法弄清楚我做错了什么。 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

＆＃13;

＆＃13;

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

＆＃13;

#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;
   	  animation-timing-function: ease-in;
  animation-duration: 2s;
}

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

您可能需要调整[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>