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

Question

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

我想达到什么目的？

我想要一种图像区域，其中显示的一些图像具有越来越不透明的效果:我希望当用户点击图像时，每张新图像都会出现在另一幅图像上。

我如何努力实现它？

我有一个包含两个“img”标签的“div”，我只是想为上面的“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');
}

样式.css

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

我知道我正在以肮脏的方式做这件事，但就好像我就在那里，似乎我只是漏掉了一行、一个标签或其他东西……有什么线索吗？

提前感谢您的时间和努力! :)

Answer 1

当您在 div 以及 div 内的图像上绑定(bind)事件处理程序时，它将被调用两次，因为事件处理程序中没有 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');
}

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

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

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