时间戳

首页 > 解决方案 > 通过单击另一部分的图像来激活页面某一部分的动画

javascript - 通过单击另一部分的图像来激活页面某一部分的动画

问题描述

在筛选了一堆关于 stackoverflow 的论坛和问题之后，在我看来，使用 JavaScript 似乎是不可避免的。我已经在我的网站上成功实现了列表的动画，但我希望动画仅在单击图像后播放（然后再次单击将其关闭）。

这是动画：

.scale-in-hor-left {  -webkit-animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}
@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

我想激活它的图像没有什么特别的

<img id="imagename" src="#" height="#" />

我知道 JavaScript 看起来像这样：

function ani(){
    document.getElementById('imagename').className ='scale-in-hor-left';
  }

但是每次我尝试一些 HTML 来同时使用这两者时，我最终都会得到一个按钮或什么都没有，而且我还没有让动画在点击之前停止。（此外，是否会成功地onclick确保动画元素在基于0%CSS 中的 s 激活之前不可见？）

标签： javascripthtmlcss

解决方案

如果您可以使用 jquery，那么： https ://api.jquery.com/click/

$("#imagename").click(function() {
 $("#imagename").addClass("scale-in-hor-left");
});

或使用香草 javascript：

document.getElementById("imagename").addEventListener("click", ani); // This calls your function ani

推荐阅读