如果我在 JavaScript 中创建了新图像，如何减慢图像变化的过渡？答案

【问题标题】：How do I slow down the transition of my image changing if I created a new image in JavaScript?如果我在 JavaScript 中创建了新图像，如何减慢图像变化的过渡？
【发布时间】：2017-03-22 22:24:13
【问题描述】：

我在 JavaScript 中创建了一个图像，但我希望它在调用该函数时消失，但是我对如何执行此操作有点困惑。当我尝试设置过渡时，它不起作用。有人可以帮忙吗？

<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"> </script>
</head>
<style>



</style>


<body>

<img src="tmac.jpg" alt="TmaC" width="175px" height="220px" class="tracy"/>
</br> </br>

<li class="thead" onclick="slow()"><a href="#">News</a></li>
<script>
function changeStyle() {
cool = document.getElementsByClassName("tracy");

tmag = cool[0].src="tmagic.jpg";
}
function slow() {
slows = setInterval(changeStyle, 3000);

slows.style.transition="2s";
}

</script>

</body>
</html>

【问题讨论】：

rad about transition here ...你需要的不仅仅是一个持续时间，你至少还需要一个属性——另外，不确定你是否可以“过渡”img src 更改
所以确实发生了变化，但我希望它淡入淡出，就好像它融入了旧图像一样。 @JaromandaX
更改 img src 属性时 CSS 过渡无关

标签： javascript html function styles setinterval

【解决方案1】：

编辑：听起来您正试图将一张图像淡入另一张图像。看到这个jsfiddle

一对。你的换行符应该是<br/>，而不是</br>。另外，为什么要使用“li”元素来保存链接？ LI 元素通常用于有序或无序列表中。

【讨论】：

【解决方案2】：

试试这样的

  document.getElementById('fade').addEventListener('click', function () {
   document.getElementById('cat').style.opacity = .0;
   document.getElementById('cat2').style.opacity = 1;
  })

#cat {
  transition: opacity 1s ease-out;
  position: absolute;
}

#cat2 {
  opacity: 0;
  transition: opacity 1s ease-out;
  position: absolute;
}

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSVdqOi4n85V3ryq1cf-5GJC7ezxjZNmqAoSVGNvCILoWgsEe6FYP7YpoY" alt="TmaC" width="175px" height="220px" id="cat"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIwESPol4bmt3xUdAAYq8OmKeua5T7UAtvdLB154Nhs888PhvP" alt="TmaC" width="175px"  height="220px" id="cat2"/>
<button id="fade" style="margin-top:250px">Fade</button>

【讨论】：

所以我知道如何淡出图像，但我希望它过渡到我在 JavaScript 中创建的另一个图像....有点像当猫消失时我想要一只新猫出现......从理论上讲。