Question

我知道如何使用常规DOM元素检测animationend事件，但是如何使用伪元素呢？

我知道要查找的事件是animationend，但是如何使用该事件将伪元素与处理程序相连接？

我尝试了以下方法，但我似乎无法让它发挥作用。

document.querySelector("#someSelector:after").addEventListener("animationend",...,false)

如何在vanilla JavaScript中执行此操作？

Answer 1

:after无法选择伪元素，就好像它们是DOM的一部分一样，因为简而言之，它们不属于DOM的一部分。话虽这么说，有可能得到你期望的事件触发器，因为他们被解雇了父母＆＃34; :after。

例如，如果您的:after位于id 'containybox'的DOM元素上，那么您可以抓取该DOM元素并触发其animationend。然后，当:after的动画结束时，该事件将会触发。

var containerBox = document.getElementById('containybox');    

containerBox.addEventListener('animationend', function() {
  console.log("Animation ended!");
});

完整的工作片段

＆＃13;

var containerBox = document.getElementById('containybox');

containerBox.addEventListener('animationend', function() {
  console.log("Animation ended!");
});

containerBox.addEventListener('transitionend', function() {
  console.log("Transition ended!");
});

＆＃13;

#containybox {
  position: relative;
  width: 100px;
  height: 100px;
  background: #fadebc;
  padding: 10px;
  text-align: center;
}
#containybox:after {
  content: "Standard aftermibob.";
  display: block;
  position: fixed;
  left: 120px;
  width: 100px;
  height: 100px;
  background: #bcdefa;
  animation: animatedBackground 1000ms linear;
}
#containybox:hover:after {
  background: #bcfade;
  transition: background-color 1000ms linear;
}
@keyframes animatedBackground {
  from {
    background-color: #000000;
  }
  to {
    background-color: #bcdefa;
  }
}

＆＃13;

<div id="containybox">
  Just a standard containybox.
</div>

＆＃13;

如何在伪元素上检测animationend事件？

1 个答案: