How to define an animation event on a pseudo-element?

Question

I know how to detect an event animationendwith a regular DOM element, but how do you do this with a pseudo-element?

I know what it takes to search animationend, but how can I attach a pseudo-element using a handler that uses this event?

I tried the following, but I can't get it to work.

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

How can I do this in vanilla javascript?

Answer 1

:afterPseudo-elements cannot be selected as if they were part of the DOM, because, in short, they are not part of the DOM. In this case, you can get the triggers of the events that you expect, since they are triggered from the "parent" :after.

, :after DOM id 'containybox', DOM animationend. , :after.

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

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

:

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

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

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

#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;
  }
}

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

Hide result