如何在js中反向动画css？

Question

我有问题，我想在 JS 中使用反向动画，在删除“animationToggler”类之前，我尝试添加被注释掉的代码，但这不起作用。

密码笔

 const menuToggler = document.querySelector('.toggler .hamburger'); menuToggler.addEventListener('click', function() { this.classList.toggle('animationToggler'); // if(this.classList.contains('animationToggler')){ // this.style.animationDirection = "reverse" // } setTimeout(() => { this.classList.toggle('active'); }, 400) });

 .toggler { display: flex; align-items: center; cursor: pointer; } .animationToggler { animation: animationTogglerMenu .8s ease; } .toggler p { margin: 0; text-transform: uppercase; font-size: 1.65rem; margin: 0 0 0 10px; } .hamburger .line { height: 4px; width: 2.5em; background: #000; margin: .45em 0; border-radius: 50px; transition: .6s; } .active .one { transform: rotate(45deg) translateY(15px); } .active .two { background-color: transparent; transition: none; } .active .three { transform: rotate(-45deg) translateY(-15px); } @keyframes animationTogglerMenu { 100% { transform: rotate(720deg); } }

 <div class="toggler"> <div class="hamburger"> <div class="line one"></div> <div class="line two"></div> <div class="line three"></div> </div> <p>Menu</p> </div>

Answer 1

我自己设法做到了，这是 JS 中的代码

const menuToggler = document.querySelector('.toggler');
const menuTogglerHamburger = document.querySelector('.toggler .hamburger');

menuToggler.addEventListener('click', function(){

    //checking if there is a class animationToggler 
    if(menuTogglerHamburger.classList.contains('animationToggler')){
        //restart animation rotate
        menuTogglerHamburger.classList.remove('animationToggler');
        void menuTogglerHamburger.offsetWidth;
        menuTogglerHamburger.classList.add('animationToggler');

    }
    
    menuTogglerHamburger.classList.add('animationToggler');
    setTimeout(()=>{
        //animation line on the cross
        menuTogglerHamburger.classList.toggle('active');
    }, 200)
});