如何使用 vanilla JavaScript 重新启动 CSS 动画？

Question

我有一个带有 4 个图像的 flexbox，当悬停在其中一个图像上时，动画播放，但是当我再次悬停时，动画不再播放。

从我到目前为止所读到的内容来看，我必须使用 JavaScript 重新启动动画，但是我在网上找到的解决方案对我不起作用。

我应该按 ID 定位跨度并在 JS 中添加/删除“textAnim”类吗？ 当我悬停图像时怎么做？

 /* Images Section Styling */ .container-3 { display: flex; flex-wrap: nowrap; justify-content: space-between; position: relative; } .container-3 img { max-width: 100%; max-height: 100%; } .image { position: relative; max-width: 100%; max-height: 100%; } /* Image overlay */ .overlay { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0); background-color: rgba(107, 105, 105, 0); transition: background-color 1s ease; transition: color 1s ease; overflow: hidden; } .image:hover .overlay { background-color: rgba(107, 105, 105, 0.5); color: rgba(255, 255, 255, 1); transition: background-color 1s ease; } .textAnim { animation: textAnimation 1s; animation-play-state: paused; position: relative; padding-left: 50%; top: 50%; } .image:hover .textAnim { animation-play-state: running; } @keyframes textAnimation { 0% { opacity: 0; padding-top: 50%; } 100% { opacity: 1; padding-top: 0%; } }

 <section class="images"> <div class="container-3"> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animation"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animaiton"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animation"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animation"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> </div> </section>

Answer 1

在这种情况下，您不需要使用 JS 重新启动动画。

每次将鼠标悬停在图像上时，下面提到的更改足以使动画继续进行。

.image:hover .textAnim {
  animation-play-state: running;
}

如果您让动画仅在悬停时运行，您将获得结果。

更新的片段如下 -

 /* Images Section Styling */ .container-3 { display: flex; flex-wrap: nowrap; justify-content: space-between; position: relative; } .container-3 img { max-width: 100%; max-height: 100%; } .image { position: relative; max-width: 100%; max-height: 100%; } /* Image overlay */ .overlay { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0); background-color: rgba(107, 105, 105, 0); transition: background-color 1s ease; transition: color 1s ease; overflow: hidden; } .image:hover .overlay { background-color: rgba(107, 105, 105, 0.5); color: rgba(255, 255, 255, 1); transition: background-color 1s ease; } .image:hover .textAnim { animation: textAnimation 1s; animation-play-state: paused; position: relative; padding-left: 50%; top: 50%; } .image:hover .textAnim { animation-play-state: running; } @keyframes textAnimation { 0% { opacity: 0; padding-top: 50%; } 100% { opacity: 1; padding-top: 0%; } }

 <section class="images"> <div class="container-3"> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animation"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animaiton"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animation"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> <div class="image"> <img src="http://via.placeholder.com/1000"> <div class="overlay"> <span class="textAnim" id="animation"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim? </span> </div> </div> </div> </section>

Answer 2

您可以通过在要设置动画的元素中添加和删除textAnim类来启动和停止 CSS 动画。 这可以通过 javascript 使用classList的 add 和 remove 方法来完成。

例如，如果元素的名称是“animation1”，您可以添加这些事件侦听器，以便在悬停期间添加textAnim类，但在未悬停时删除：

let a1 = document.getElementById("animation1");

a1.addEventListener("mouseover", function()
{
    a1.classList.add("textAnim");
});

a1.addEventListener("mouseout", function()
{
    a1.classList.remove("textAnim");
});

注意：我看到您在同一个 html 文档中多次使用相同的 ID ( id="animation" )。 那是技术上无效的 HTML。 您应该为每个 id 命名唯一的名称，或者创建一个名为 animation 的附加类。 是的，元素可以属于多个类（而不是像类一样使用 id）。

Answer 3

 but when i hover again the animation is no longer playing

你想要一个无限的动画，你可以解决这个问题

你试过了吗

animation-iteration-count: number|infinite|initial|inherit;

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation

抱歉想发表评论，但没有那么多代表