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合并为一个，我们失去了功能。这就是 magic 到位的地方。我们强制重新要求img2.offsetHeight，它必须重新计算位置并重新绘制页面的相关部分（可能是整页）。实现它的其他方法是将代码移动到setTimeout函数，这也无法优化。

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

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

演示

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

1 个答案: