If you click on the in button, and then on the in-out , the second link of the second animation will not be executed. Why and how to fix it? Really, before adding new classes, the old ones are not cleared. As a result, what happens in the example?

 document.querySelector('.button-group').addEventListener('click', event => { let id = event.target.classList.value; let rect = document.querySelector('.rect'); if(id === "in"){ rect.classList.add('zoom-in-animation'); }else if(id === "in-out"){ rect.classList.remove('zoom-in-animation'); rect.classList.add('zoom-in-out-animation') } } ) 
 .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .rect-control { width: 400px; height: 400px; border: 1px solid black; } .rect { width: 320px; height: 320px; background: lightcoral; transform-origin: center center; } .zoom-in-animation { animation: zoom-in 1s linear 0s 1 normal running forwards; } .zoom-in-out-animation { animation-name: zoom-out, zoom-in; animation-duration: 1s, 1s; animation-delay: 0s, 1s; } @keyframes zoom-in { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } } @keyframes zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.2); } } 
 <div class="rect-control center"></div> <div class="container center"> <div class="rect"></div> </div> <div class="button-group"> <button class="in">in</button> <button class="in-out">in-out</button> </div>

    1 answer 1

    Try this if(~selector.className.indexOf('in')) {console.log('hasClass');} or

     if(selector.classList.contains('in')) {console.log('selector hasClass in');}

    PS Why is the name of the variable id?

    • but classList is not an array - Grundy
    • ok. pseudo array - Khangeldy Ilebaev September
    • In fact, not a pseudo-massiv , localizers can no longer be translated. In fact, it is a live DOMTokenList collection and very little in common with an array, almost nothing - Grundy