javascript - 如何使用 Javascript 调用 CSS 动画

Question

我正在创建一个包含几张图片的幻灯片 View ，我正在尝试将 CSS 动画应用于所有图片。

<script>
    function slideImages(){
          var img = document.getElementById('picShow');
          var images = ['images/img2.jpg','images/img3.jpg','images/img4.jpg'];
          var x = 0;
          function slide(){
               if (x < images.length){
                   x=x+1;
               }else{
                   x=1;
               }
               img.innerHTML = "<img src="+images[x-1]+">";
           }
           setInterval(slide,2500);
     }
</script>

#picShow{
    animation:fade 1.5s linear;
}
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

<div id="picShow">
      <img src="images/img1.jpg" id = "img">
</div>
<script>slideImages();</script>

我希望所有图像都具有动画效果，但只有第一张图像具有动画效果。任何人都可以帮忙吗..

Answer 1

通过在包含 <div id="picShow"> 上设置动画动画实际上是在整个 show div 上，而不是单个图像上。实际上，您正在使用 javascript 更改图像源这一事实也会影响这一点，因为就 CSS 所知，您只有一个元素恰好具有新属性(而不是新元素)。

不过，除了 JS 之外，CSS 动画只会运行一次，除非您指定希望它运行多少次。如果你也想要它循环，你可以尝试:

#picShow {
  /* set delay to match JS timing and iteration count to infinite: */
  animation:fade 1.5s linear 2.5s infinite; 
}

不过，您很可能会遇到 JS 和 CSS 无法同时启动其 2.5 秒计时器的问题。

一种更一致的方法是使用 CSS 过渡而不是动画，并使用 JS 在事件图像上切换类名而不是切换 src 属性:

HTML:

<div id="picShow">
  <img id="img1" src="https://via.placeholder.com/150/09f234" class="active" />
  <img id="img2" src="https://via.placeholder.com/150"  />
  <img id="img3" src="https://via.placeholder.com/150/09f/fff" />
</div>

CSS:

#picShow img {
  transition: opacity 1.5s linear;
  opacity: .0;
  position:absolute;
}
#picShow img.active {
  opacity:1;
}

您的 JS 需要修改以删除类 active并将其添加到下一个图像。添加/删除类将导致每次触发 CSS 转换。我做了一个快速的 jQuery 版本，它使用你在这个代码笔中的一些原始逻辑来说明......如果你愿意的话，没有什么是用普通 JS 很难做的:

https://codepen.io/anon/pen/OGJLwO