Play then reverse second animation (click with container)

by ShaCP

HTML

<div id="container">
<div id="one" class="anim-zero" tabindex="-1">
<span onclick="((event) => event.stopPropagation())(event)">Test</span>
</div>
<p>
some text
</p>
</div>
<!-- <div id="counter">
</div> -->

CSS

body {
  height: 100vh;
}

#container {
  width: 200px;
  height: 200px;
}

#one {
  width: 100%;
  height: 100%;
  background-color: lightskyblue;
  animation-fill-mode: forwards;
  animation-duration: 1.65s;
  animation-timing-function: linear;
}

#one.anim-zero {
  animation-name: zero;
}


#one.anim-one {
  animation-name: one;
}

#one.animZeroEndPosition {
  transform: translateY(100%);
}

#one.animOneEndPosition {
  transform: translateX(100%) translateY(100%);
}

#one.pointerEventsOff {
  pointer-events: none;
}


@keyframes zero {
  0% {
    transform: none;
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes one {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(100%) translateX(100%);
  }
}

#one.reverseAnim {
  animation-direction: reverse;
}

p {
  margin-top: 50%;
}

JavaScript

const toggleAnim = (e, name) => {
  debugger;
  e.target.classList.toggle(name)
}

const toggleAnimOneEndPosition = (e) => {
  if (e.animationName === "one") {
    e.target.classList.toggle("animOneEndPosition");
  } else if (e.animationName === "zero") {
    e.target.classList.toggle("animZeroEndPosition");
  }
}

const toggleReverseAnim = (e) => {
  e.target.classList.toggle("reverseAnim");
}

const togglePointerEvents = (e) => {
  e.target.classList.toggle("pointerEventsOff");
}

const preventDefault = (e) => {
  e.preventDefault();
}

const animationStart = (e) => {
  if (e.animationName === "one") {
    /* togglePointerEvents() */
    e.target.removeEventListener("click", toggleAnimOne);
  }
}

const animationEnd = (e) => {
  /* togglePointerEvents() */
  ;
  if (e.animationName === "one") {
    toggleAnim(e, "anim-one");
    toggleAnimOneEndPosition(e);
    toggleReverseAnim(e);
  } else {
    if (e.animationName === "zero") {
      toggleAnim(e, "anim-zero");
      toggleAnimOneEndPosition(e);
    }
  }
  e.target.addEventListener("click", toggleAnimOne);
}

const toggleAnimOne = (e) => {
  toggleAnim(e, "anim-one")
}

container.addEventListener("animationend", animationEnd)
container.addEventListener("animationstart", animationStart)


/* window.removeEventListener("blur", preventDefault); */