Here is a slider animation I have designed:
@mixin progress {
@-webkit-keyframes interval {
from {
width: 0;
}
to {
width: 100%;
}
}
animation: var(--duration) linear 0s interval;
animation-play-state: var(--playState);
}
.slider-item {
@include progress;
}My goal is to ensure that the current slider animation completes when a click event occurs. I attempted to select the target element like this:
this.$refs[`slider-item-${id}`]However, the animation property remains empty. Am I overlooking something here? Is there a better alternative available? (I also tried using the API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate without success)