Есть такой код https://jsfiddle.net/b9zg73Ld/50/, при клике срабатывает анимация стрелки(их будет 2), но срабатывает через раз, помоги разобраться? в javascript я новичек
let iconButtonPrev = document.querySelector(".portfolio__arrow-prev");
let iconButtonNext = document.querySelector(".portfolio__arrow-next");
if (iconButtonNext) {
iconButtonNext.addEventListener("click", function(e) {
iconButtonNext.classList.toggle("_active");
});
};
if (iconButtonPrev) {
iconButtonPrev.addEventListener("click", function(e) {
iconButtonPrev.classList.toggle("_active");
});
};
.portfolio__arrows {
cursor: pointer;
display: flex;
align-items: center;
position: absolute;
top: 30%;
transform: translate(0px, -50%);
width: calc(100% + 0px);
z-index: 5;
left: 0;
justify-content: space-between;
background: #ffffff;
margin: 100px;
}
.portfolio__arrow-prev {
display: flex;
justify-content: center;
align-items: center;
transform: scale3d(-1, 1, 1);
}
.characters {
background-color: #fff;
border-bottom: 7px solid #ffd434;
position: relative;
}
.characters::after {
border: medium solid transparent;
content: "";
top: 90%;
left: 50%;
position: absolute;
height: 0;
width: 0;
border-color: #ffd434 rgba(255, 212, 52, 0) rgba(255, 212, 52, 0);
border-width: 30px;
margin-top: -5px;
margin-left: -30px;
}
.portfolio__arrow-prev::before {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 0;
width: 35px;
height: 70px;
border-radius: 0 35px 35px 0;
background: rgba(111, 148, 182, 0.15);
content: '';
opacity: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.portfolio__arrow-prev::after {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
right: 50%;
left: auto;
margin: -35px 0 0 0;
width: 35px;
height: 70px;
border-radius: 35px 0 0 35px;
background: rgba(111, 148, 182, 0.15);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.portfolio__icon-next ::before {
font-size: 48px;
color: #ccba96;
transform: rotate(-180deg);
}
.cbutton--effect-lazar-inverted {
transform: scale3d(-1, 1, 1);
}
.portfolio__arrow-prev._active::before {
-webkit-animation: anim-effect-lazar-1 0.8s ease-out forwards;
animation: anim-effect-lazar-1 0.8s ease-out forwards;
}
.portfolio__arrow-prev._active::after {
-webkit-animation: anim-effect-lazar-2 0.8s ease-out forwards;
animation: anim-effect-lazar-2 0.8s ease-out forwards;
}
@keyframes anim-effect-lazar-1 {
0%,
25% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 180deg);
transform: perspective(1000px) rotate3d(0, 1, 0, 180deg);
}
}
@keyframes anim-effect-lazar-2 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="portfolio__arrows">
<button class="portfolio__arrow-prev desktop-swiper-button-prev desktop-swiper-button swiper-button cbutton--effect-lazar-inverted">
<div class="characters"></div>
</button>
</div>