如何使用Javascript调用CSS动画

Question

我正在创建一个包含几个图像的幻灯片视图，我试图将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">上设置动画，动画实际上是在整个节目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

Answer 2

首先，img.innerHTML = "<img src="+images[x-1]+">"不适用于CSS动画。

有两种方法可以解决这个问题。

第一种是使用类并将CSS动画应用于它们。

function slideImages() {
var picShow = document.getElementById("picShow");

picShow.children[picShow.dataset.activeSlide].classList.remove("active")

picShow.dataset.activeSlide = (parseInt(picShow.dataset.activeSlide) + 1) % picShow.children.length

picShow.children[picShow.dataset.activeSlide].classList.add("active")
}

@keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}
@keyframes fadeOut {
from {opacity: 1} 
to {opacity: 0}
}
#picShow{
height: 320px;
}
#picShow img{
position: absolute;
}
#picShow img.active{
animation: fadeIn 1s linear;
opacity: 1;
}
#picShow img:not(.active){
animation: fadeOut 1s linear;
opacity: 0;
}

<div id="picShow" data-active-slide="0">
<img class="active" src="https://www.dike.lib.ia.us/images/sample-1.jpg/image">
<img src="https://www.dike.lib.ia.us/images/sample-2.jpg/image">
</div>
<button onclick="slideImages()">Next Image</button>

在这里，我做了一个非常简单的例子。如果图像位于同一位置，并且只有一个具有active类，则可以使用 JavaScript 通过更改哪个元素具有active类来更改图像<img>。

第二种方法是使用 Web 动画 API。如果您有兴趣，请阅读本教程。