css keyforms роботает в обратную сторону после удаления класса?

Question

const exitBeyond = document.querySelector('.pip-over');
const windowPup = document.querySelector('.window');
const btnOpen = document.querySelector('.pup-menu');

exitBeyond.addEventListener('click', function (e) {
   if (e.target == this) {
      exitBeyond.classList.remove('hide')
      windowPup.classList.remove('showen');
      windowPup.classList.add('hiden')
   }

});
btnOpen.addEventListener('click', () => {
   exitBeyond.classList.add('hide')
   windowPup.classList.remove('hiden')
   windowPup.classList.add('showen')

})

.pip-over {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 20;
   opacity: 0;
   visibility: hidden;
   padding: 50px 0;
   transition: 1s;
}
img{
width:100%;
}
.window {
   position: relative;
   text-align: center;
   padding: 30px;
   background: #fff;
   width: 70%;
   margin: 0 auto;
   transition: 1s;
}
.window p {
   margin: 40px 0;
}
.title {
   margin-top: 50px;
}
.img-item {
   margin: 70px 0;
}

.exit {
   position: absolute;
   right: 20px;
   top: 20px;
   padding: 10px 0;
   width: 20px;
}
.cross {
   display: block;
   width: 20px;
   height: 2px;
   background: #000;
   position: absolute;
   transition: 1s;
}
.cross::after,
.cross::before {
   content: "";
   display: block;
   width: 20px;
   height: 2px;
   background: #000;
   position: absolute;
   transition: 0.7s;
}

.cross::before {
   top: 5px;
}
.cross::after {
   bottom: 5px;
}

.exit:hover .cross::before {
   transform: rotate(45deg);
   top: 0;
}

.exit:hover .cross::after {
   transform: rotate(-45deg);
   bottom: 0;
}
.exit:hover .cross {
   background: transparent;
   cursor: pointer;
}
.window--active {
   animation-name: hidenWindow;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}
.hide {
   visibility: visible;
   opacity: 1;
}

.showen {
   animation-name: show;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}
.hiden {
   animation-name: hide;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

@keyframes show {
   0% {
      transform: scale(0.8);
   }
   30% {
      transform: scale(1);
   }
   100% {
      transform: scale(1);
   }
}

@keyframes hide {
   0% {
   }
   30% {
      transform: scale(0.8);
   }
   100% {
      transform: scale(0.8);
   }
}

<div class="pip-over ">

      <div class="window">
         <div class="exit">
            <span class="cross"></span>
         </div>
         <h1 class="title">
            New Window
         </h1>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae debitis itaque voluptatum totam nulla,
            odit maxime repellendus porro repellat dolorum magnam accusamus odio reprehenderit illum enim dolor
            voluptatem ducimus voluptate placeat. Exercitationem repellendus sed nihil blanditiis sint nostrum error.
            Odit nostrum ex possimus maiores exercitationem rerum assumenda. Ratione, corrupti veniam.</p>
         <img class="img-item" src="https://i2.rozetka.ua/owoxads/sliders/29/29061.jpg" alt="">
      </div>
   </div>
   <button class="pup-menu">open window</button>

Есть ниже такой код. При клике добавляю класс с такой анимацией, и на 100% сохраняет свойства, а можно сделать когда удалю класс с такой анимацией, он срабатывал в обратную сторону? или надо создавать другой keyframes?

@keyframes hidenWindow {
   0% {
      visibility: hidden;
      opacity: 0;
   }
   30% {
      transform: scale(0.8);
   }

   100% {
      visibility: visible;
      transform: scale(1);
      opacity: 1;
   }
}

Вот код, и когда нажимаю на кнопку, добавляет класс .showen а когда жму закрыть модалку, добавляет клас .hiden ,но при закрытие модалки, класс.hiden не роботает с анимацией, а сразу 0% переходит

.showen {
   animation-name: show;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}
.hiden {
   animation-name: show ;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   animation-direction: reverse;
}

@keyframes show {
   0% {
      transform: scale(0.8);
       opacity:0;
   }
   30% {
      transform: scale(1);
      opacity:0.5;
   }
   100% {
      transform: scale(1);
     opacity:1;
   }
}

Answer 1

При удалении класса обратной анимации с помощью правила @keyframes добиться нельзя. Как вариант, можно создать новое правило, установив ключевые кадры в обратном порядке, для класса, который будет прописан в теге по умолчанию. Пример смотрим ниже. Но здесь есть минус - при загрузке страницы анимация будет проигрываться.

function toggle() {
  document.getElementById("btn").classList.toggle("one");
  document.getElementById("btn").classList.toggle("two");
}

.one {
  transform: scale(1);
  background: red;
  animation: 2s linear one;
}

@keyframes one {
  0% {
    transform: scale(2);
    background: none;
  }
  100% {
    transform: scale(1);
    background: red;
  }
}

.two {
  transform: scale(2);
  background: none;
  animation: 2s linear two;
}

@keyframes two {
  0% {
    transform: scale(1);
    background: red;
  }
  100% {
    transform: scale(2);
    background: none;
  }
}

<button id="btn" class="one" onclick="toggle()">Btn</button>

Answer 2

Без добавления второго (обратного) @keyframes не обойтись, но код можно чуть сократить, переключая только один класс и меняя только имя анимации (animation-name). Таким образом все остальные параметры анимации можно менять в одном месте.

Старт анимации, при загрузке страницы, можно "побороть" с помощью хака - добавить анимируемому элементу фейковый класс и удалять его при взаимодействии с элементом.

function toggle() {
  document.getElementById("btn").classList.remove("stop");
  document.getElementById("btn").classList.toggle("rev");
}

#btn:not(.stop) {
  transform: scale(2); background: red;
  animation: ani 2s linear forwards;
}
@keyframes ani {
  to { transform: scale(1); background: none; }
}

#btn.rev {
  transform: scale(1); background: none;
  animation-name: rev;
}
@keyframes rev {
  to { transform: scale(2); background: red; }
}

<button id="btn" class="stop" onclick="toggle()">Btn</button>

БЛОГ НА HUSL

css keyforms роботает в обратную сторону после удаления класса?

Ответы (2 шт):