Integrating CSS transitions and animations with JavaScript

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Integrating CSS transitions and animations with JavaScript

If you want to change JavaScript after a CSS Transition or Animation completes, you can use the transitionend or animationend event.

(It’s rare to use these two properties though; use them only if you need to).

Transitionend

The transitionend event triggers when a transition completes. This event can only be attached to the document.

document.addEventListener("transitionend", e => {
  // Do something here
})

When transitionend occurs, you’re mostly interested in two properties:

  1. event.target—the element that was transitioned
  2. event.propertyName—the property that was transitioned
document.addEventListener("transitionend", e => {
  console.log("event.target is ", e.target)
  console.log("event.propertyName is ", e.propertyName)
})
Image shows the target and propertyName of a transitionend event
The "target" and "propertyName" tells you which transition was completed.

Transitionend for multiple properties

transitionend can be used to detect transitions with multiple properties. It triggers once per property, when the transition for that property completes.

/* CSS */
button {
  background-color: pink;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
  /* Other properties */
}

button.is-highlighted {
  background-color: goldenrod;
  transform: translateX(1em);
}

// Add is-highlighted class to button on click
const button = document.querySelector("button")
button.addEventListener("click", e => e.target.classList.add("is-highlighted"))

// The transitionend event
document.addEventListener("transitionend", e => {
  console.log("event.target is ", e.target)
  console.log("event.propertyName is ", e.propertyName)
})
An image that shows two sets of logs—one for background-color and one for transform
When two or more properties are transitioned at once, "transitionend" logs each of them individually

Animationend

The animationend event triggers when an animation completes. Like transitionend, animationend can only be attached to the document.

Note: if the animation repeats infinitely, animationend will not trigger.

document.addEventListener("animationend", e => {
  // Do something here
})

When animationend occurs, you’re mostly interested in two properties:

  1. event.target—the element that was animated
  2. event.animationName—the name of the completed animation
document.addEventListener("animationend", e => {
  console.log("event.target is ", e.target)
  console.log("event.animationName is ", e.animationName)
})
Image shows the target and propertyName of a transitionend event
The "target" and "animationName" tells you which animation was completed.

Wrapping up

transitionend and animationend are events you can use to tell if your transition or animation is completes. They’re invaluable if you need to sync up your transition or animation with JavaScript.

Exercise

  1. Create three elements with three different transition-property and transition-duration. Use transitionend to remove elements when their transition is completes.
  2. Create three elements with three different animations. Use animationend to remove elements when their transition is completes.

Answers

  • Create three elements with three different transition-property and transition-duration. Use transitionend to remove elements when their transition completes.

(I’m just going to create one element for this answer. You can create the other two for practice)

.element {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: red;
}

.element:hover {
  transition: translateX(100px);
}

const element = document.querySelector('.element')

element.addEventListener('transitionend', e => {
  const el = e.currentTarget
  el.parentNode.removeChild(el)
})
  • Create three elements with three different animations. Use animationend to remove elements when their transition completes.

(Again, I’m going to create one element for this answer. You can create the other two for practice)

@keyframes move {
  0% {
    transform: tranlateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.element {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: red;
  animation: 1s move paused;
}

const element = document.querySelector('.element')

element.addEventListener('click', ev => {
  ev.currentTarget.style.animationPlayState = 'running'
})

element.addEventListener('animationend', e => {
  const el = e.currentTarget
  el.parentNode.removeChild(el)
})