Question

在浏览了许多关于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来确保动画元素在基于CSS中的0%激活之前是不可见的？）

Answer 1

如果可以使用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

Answer 2

您正确地认为您希望使用click事件处理程序来控制动画；否则，您将看到CSS动画立即开始。

按照书面规定，您的ani()函数只会将您的动画类添加到目标“列表”元素中。您将需要在“单击”上切换类名，以交替添加或。为此，事件处理程序需要确定要采取的操作。

假设您尝试在普通JavaScript中完成此操作（也就是说，您没有使用jQuery之类的库，该库本身具有.toggleClass()方法），则可以使用类名本身来确定这一点……

var
  CLASSNAME_TOGGLE = 'toggle-class',
  el_trigger = document.getElementById('trigger'),
  el_target = document.getElementById('target');

function toggleClass(event) {
  event.preventDefault();
  if (el_target.classList.contains(CLASSNAME_TOGGLE)) {
    // remove the class
    el_target.classList.remove(CLASSNAME_TOGGLE);
  } else {
    // add the class
    el_target.classList.add(CLASSNAME_TOGGLE);
  };

}

el_trigger.addEventListener('click', toggleClass, false);

#target {
  /* this would be your list's default styles */
  padding: 20px;
  margin: 20px;
  border: 1px solid #fbb;
  background: #fee;
}

#target.toggle-class {
  /* this would be your list's animation */
  border-color: #bfb;
  background: #efe;
}

<div id="target">
  Your "List" Element [the target of the toggled class]
</div>
<img id="trigger" src="https://via.placeholder.com/300x50?text=Your+Trigger+Image" />

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

2 个答案: