Блог

Главная - Вопросы по программированию - Как установить прослушиватель событий для события окончания анимации

Как установить прослушиватель событий для события окончания анимации

#javascript #animation #event-listener

Вопрос:

Вместо того, чтобы устанавливать тайм-аут, я хочу установить прослушиватель событий для события окончания анимации.

Где функция будет выполнена, как только анимация завершится, без необходимости дополнительного таймера.

Чтобы сделать это, я нашел следующее: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

Но я не знаю, как это будет записано в мой код. https://jsfiddle.net/7yn9ofk8 /

Насколько я понимаю, мне нужно добавить прослушиватель событий в тело и прослушать animationend , чтобы внутри обратного вызова запустить код, который я запускаю внутри setTimeout .

Как это будет добавлено в код?

Затухание происходит после нажатия кнопки выхода, которую можно увидеть после нажатия кнопки воспроизведения svg.

Я предоставил фрагмент текста, в котором затухание доступно для просмотра.

CSS — код

 .fadingOut:before,
.fadingOut .isOpen {
  animation: fadingOut 1s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Javascript

   function resetPage() {
    document.querySelector("body").classList.add("fadingOut");
    setTimeout(function() {

      document.querySelector("body").classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
    }, 1000);
  }
 
 const manageUI = (function makeManageUI() {

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function showBackground(background) {
      background.classList.remove("bg1");
    }
    allBackgrounds.forEach(showBackground);
  }

  function resetCurtains(curtainSelector) {
    const allCurtains = document.querySelectorAll(curtainSelector);

    function showCurtain(curtain) {
      curtain.classList.remove("active");
    }
    allCurtains.forEach(showCurtain);
  }

  function showAllButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("hide");
    }
    allButtons.forEach(showButton);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("isOpen");
    }
    allButtons.forEach(showButton);
  }

  function resetPage() {
    document.querySelector("body").classList.add("fadingOut");
    setTimeout(function () {

      document.querySelector("body").classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
    }, 1000);
  }

  function hideCurtains(exitButtons) {
    const container = exitButtons.closest(".inner-container");
    const curtains = container.querySelector(".sliding-panels");
    curtains.classList.add("hide");
  }

  function exitClickHandler(evt) {
    resetPage();
    hideCurtains(evt.currentTarget);
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
  }

  return {
    init
  };
}());

const manageCover = (function makeManageCover() {
  const config = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function hideAll(elements) {
    elements.forEach(hide);
  }

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".outer");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

  function showCovers(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }

  function coverClickHandler(evt) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(evt.currentTarget);
    const cover = evt.currentTarget;
    showCovers(cover);
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function init(selectors) {
    config.containers = document.querySelectorAll(selectors.container);
    const playButtons = document.querySelectorAll(selectors.playButton);
    addClickToButtons(playButtons);
  }

  return {
    addCoverHandler,
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function createResetHandler(player) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", function resetVideoHandler() {
        player.destroy();
      });
    })
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    createResetHandler(player);
  }

  function onPlayerStateChange(event) {
    const player = event.target;
    return player;
  }

  function addPlayer(video, playerOptions) {
    playerOptions.videoId = playerOptions.videoId || video.dataset.id;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange = onPlayerStateChange;

    const player = new YT.Player(video, playerOptions);
    return player;
  }

  return {
    addPlayer
  };
}());

const managePlayer = (function makeManagePlayer() {
  const playerVars = {
    autoplay: 1,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3
  };
  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    playerVars,
    width: 640
  };

  function show(el) {
    el.classList.remove("hide");
  }

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {
    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
        combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
      }
    });
    return combined;
  }

  function createPlayer(videoWrapper, playerOptions = {}) {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);
    return videoPlayer.addPlayer(video, options);
  }

  function createCallback(wrapper, playerOptions) {
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function initPlayer(wrapper, playerOptions) {
    show(wrapper);
    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
  }

  return {
    adder: playerAdder,
    createCallback
  };
}());

function onYouTubeIframeAPIReady() {

  function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

  addPlayer(".playa", {});
  addPlayer(".playb", {});
  addPlayer(".playc", {});
  addPlayer(".playd", {});
  addPlayer(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  addPlayer(".playf", {});
  addPlayer(".playg", {});
  addPlayer(".playh", {});
  addPlayer(".playi", {});

  manageCover.init({
    container: ".container",
    playButton: ".thePlay"
  });

  manageUI.init({});
} 
 .play1  {
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.play2 {
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.play3 {
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.play4 {
  --color-a: orange;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.play5 {
  --color-a: yellow;
  --color-b: black;
  --color-c: yellow;
  --color-d: black;
}

.play6 {
  --color-a: blue;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.play7 {
  --color-a: red;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.play8 {
  --color-a: white;
  --color-b: black;
  --color-c: white;
  --color-d: black;
}

.play9 {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}


@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadingOut:before,
.fadingOut .isOpen {
  animation: fadingOut 1s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 290px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 10px;
}

.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  flex: 1 0 0;
}

body.bg1 {
  animation: fadebody 5s ease 0s forwards;
}

body.bg1 .with-curtain:before{
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
  background-image:
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),

    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),

    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),

    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),

    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),

    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),

    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),

    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),

    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),

    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),

    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),

    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),

    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),

    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),

    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),

    linear-gradient(var(--color-a), var(--color-a));
}

.thePlay:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.inner-container {
  display: none;
}

/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.thePlay {

  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.played {
  fill: green;
}



button.thePlay {
  pointer-events: none;
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: transparent;
  fill: red;
  padding: 0;
}

.exitsvg {
  fill: none;
  fill-rule: evenodd;
  stroke: #ff0000;
  stroke-width: 17.80202103;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-opacity: 1;
  border: 4.625px solid #4e4e4e;
  border-radius: 100%;
}

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(#filter)'/> </svg>");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain3 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain3 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain4 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain4 {
  to {
    transform: translateX(100%);
  }
}


.container.active .curtain .panel-right {
  animation: curtain5 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain5 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain6 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain6 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain7 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain7 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain8 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain8 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain9 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain9 {
  to {
    transform: translateX(100%);
  }
}


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;

  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
} 
 <div class="outer">
    <div class="container play1 with-curtain">
        <button class="playa thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
          <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>
    </button>
        <div class="inner-container curtain curtain1">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="CHahce95B1g"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <g id="exit">
            <title>exit</title>
            <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
            <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
          </g>
        </svg>
      </button>
        </div>
    </div>
    <div class="container play2 with-curtain">
        <button class="playb thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain2">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play3 with-curtain">
        <button class="playc thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain3">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play4 with-curtain">
        <button class="playd thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain4">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play5 with-curtain">
        <button class="playe thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain5">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play6 with-curtain">
        <button class="playf thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain6">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play7 with-curtain">
        <button class="playg thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain7">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play8 with-curtain">
        <button class="playh thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain8">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
    <div class="container play9 with-curtain">
        <button class="playi thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
        <div class="inner-container curtain curtain9">
            <div class="ratio-keeper">
                <div class="wrap">
                    <div class="video video-frame" data-id="-Xgi_way56U"></div>
                </div>
                <div class="sliding-panels">
                    <div class="panel-left"></div>
                    <div class="panel-right"></div>
                </div>
            </div>
            <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
        </div>
    </div>
</div>

Ответ №1:

Насколько я понимаю, мне нужно добавить прослушиватель событий в тело и прослушать animationend , чтобы внутри обратного вызова запустить код, который я запускаю внутри setTimeout .

У вас все правильно.

Вам нужно будет использовать другой addEventListener() (как вы использовали в другом месте).

Реализация выглядит следующим образом:

 function resetPage() {

  document.body.classList.add("fadingOut");
  document.body.addEventListener('animationend', function() {

      document.body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
    });
}

Примечание. Вам не нужен document.querySelector('head') или document.querySelector('body') . Вместо document.head этого и document.body являются стандартными.

Метки: