GetAnimations example

by Julien Roche

HTML

<section>
  <button>Click me!</button>
</section>
<aside>
  <ul></ul>
</aside>

CSS

html,
body {
  background-color: white;
  border: 0px solid transparent;
  margin: 0 0 0 0;
  height: 100%;
  padding: 0 0 0 0;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

aside {
  background-color: lightgray;
  border-left: 1px solid black;
  bottom: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 10rem;
}

section {
  align-items: center;
  background-color: yellow;
  border: 3px solid orange;
  border-radius: 1rem;
  display: flex;
  height: 10rem;
  justify-content: center;
  transition: transform 1s, background-color 2s, rotate 3s;
  width: 10rem;

  &>button {
    color: black;
  }
}

.animation-move_x_right {
  transform: translateX(3rem);
}

.animation-change_background {
  background-color: burlywood;
}

.animation-rotate {
  rotate: 45deg;
}

JavaScript

const button = document.querySelector('button');
const element = document.querySelector('section');
const ul = document.querySelector('ul');

element.addEventListener('transitionend', (event) => {
  const li = document.createElement('li');
  li.textContent = 'transitionend said one animation is finished';
  ul.appendChild(li);
});

button.addEventListener('click', async () => {
  element.classList.add(
    'animation-move_x_right',
    'animation-change_background',
    'animation-rotate'
  );

  // Use of https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations to detect all animations are finished
  await Promise.all(element.getAnimations({ subtree: true }).map((animation) => animation.finished));
  const li = document.createElement('li');
  li.textContent = 'getAnimations said all animations are finished';
  ul.appendChild(li);
}, false)