Why doesn't a chain of animation work?

[jeanid]

If you press the button. inand then in-outthe second line of the second animation will not be implemented. Why and how to fix it? Is it true that before the new classes are added, the old ones do not clean up 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>

[Analeea]

Try that. 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?