在同一元素上重新启动CSS动画

Question

我刚刚开始使用Javascript控制的CSS动画，我遇到了一个问题，我确信这很简单......

我想要实现的目标是什么？

我希望有一种图像区域，其中一些图像显示增加不透明度效果：我希望每个新图像在用户点击图像时出现在另一个上。

我如何努力实现它？

我有一个“div”，其中包含两个“img”标签，我只是想让上层“img”动画，然后在必须显示新图像时交换图像“src”。 让我来解释一下：

• “img1”是底部的图像，显​​示“我的第一张照片”。

• “img2”是顶部的图像，以不透明度0开始。

• 当用户点击图像时，“我的第二张照片”与“img2”相关联，并且“img2”开始并且动画淡入。

• 当用户再次触摸时，“img1”将其“src”更改为显示“我的第二张照片”，“img2”将其alpha更改为0，将其源更改为“我的第三张照片”并再次开始淡入动画。

• 等等，使新图像始终出现在当前图像上。

奇怪的部分：代码

由于我对CSS动画和Javascript仍然非常环保，我试图按如下方式进行：

index.html的：

<div style="position:absolute; top:50%; left:50%; margin-left:-114px; margin-top:-203px;" onClick="canviaImatge();">
   <img id="img_1" class="pantalla" src="" style="position:absolute;" />
   <img id="img_2" class="pantalla" src="" style="position:relative; left:50px" />
</div>
<script>
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
document.getElementById("img_2").style.opacity = 0;
</script>

index.html（Javascript）

function canviaImatge()
{
  document.getElementById("img_2").style.opacity = 0;
  document.getElementById("img_2").classList.remove('horizTranslateApareix');

  if(currentPantalla == 1)
  {
    document.getElementById("img_1").src = arrImatges[0];
    document.getElementById("img_2").src = arrImatges[1];
  }else{
    document.getElementById("img_1").src = arrImatges[1];
    document.getElementById("img_2").src = arrImatges[0];
  }

  document.getElementById("img_2").classList.add('horizTranslateApareix');
}

style.css文件

.pantalla.horizTranslateApareix {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  opacity: 1 !important;
}

我知道我这样做很脏，但就像我只是在那里，似乎我只是错过了一条线，一个标签或什么......有什么线索吗？

提前感谢您的时间和精力！ :)

Answer 1

当您在div上以及div内的图像上绑定事件处理程序时，它将被调用两次，因为事件处理程序中没有e.preventBubble() 。 您可以通过仅在div上使用它来避免这种情况。

第二个问题是，在div内部第一次单击后，转换处于最终状态，并且您不会将其移动到初始状态。 我将通过使用2个类来实现所需的行为。 一个用于转换，一个用于初始状态，最终状态隐含在此处， opacity:1是默认值。

.pantalla.invisible {
    opacity: 0;
}

.pantalla.horizTranslateApareix {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

主要部分在JS。 我们首先删除转换，否则也需要1秒来隐藏图像。 然后我们隐藏图像并返回转换，进行图像交换，最后再次显示图像，开始转换。

function canviaImatge()
{
    img2.classList.remove('horizTranslateApareix');
    img2.classList.add('invisible');
    img2.offsetHeight; // <-- force repaint, otherwise browser optimize and nothing changes
    img2.classList.add('horizTranslateApareix');

    // image swapping

    img2.classList.remove('invisible');
}

这将是理想的情况，但是浏览器会进行优化，所以我们不能像那样简单地使用它。 浏览器尽可能多地重新绘制页面，因此它们将几个opearions合并为一个，我们失去了功能。 这就是魔术到位的地方。 我们强制重绘要求img2.offsetHeight ，它必须重新计算位置并重新绘制页面的相关部分（可能是整页）。 实现它的其他方法是将代码移动到setTimeout函数，该函数也无法优化。

setTimeout(function() {
    img2.classList.add('horizTranslateApareix');
    img2.classList.remove('invisible');
}, 1)

演示http://jsfiddle.net/Gobie/e4m3R/2/