Javascript 如何在开始时阻止动画发生

我有一个圆的SVG

    <div class="container">
            <div class="switch">
                <svg id="circle" width="150" height="150" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="250" cy="250" r="250" fill="black"/>
                </svg>
                <svg id="back_holder" width="465" height="169.5" viewBox="0 0 620 226" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="620" height="226" rx="113" fill="white"/>
                </svg>
            </div>
    </div>

我正在尝试添加.circleAnimated属性，并使用JS分配它，以便能够制作切换动画。问题是我找不到合适的方法来做。所以我做了这个

const circle = document.getElementById('circle');
circle.addEventListener('click', ()=>{
    circle.classList.toggle("circleAnimated");
});

这可以正常工作，但问题是当我加载页面时，反向动画会先播放，然后正常运行

---

有没有什么方法可以让我停止播放第一个动画，我只希望在第一个动画后单击圆圈时播放。

删除行

动画：circleAnimRev 0.3s ease in out forwards来自css。为
反向动画制作一个单独的类
，或者在单击按钮时添加
circleAnimated
和
circleAnimRev
类


const circle=document.getElementById（'circle'）；
circle.addEventListener（'click'，（）=>{
const currClass=circle.classList[0]；
如果（currClass==“circleAnimated”）{
circle.classList.remove（'circleAnimated'）；
circle.classList.add（'circleAnimRev'）；
}否则{
circle.classList.remove（'circleAnimRev'）；
circle.classList.add（'circleAnimated'）；
}
});
#圆圈{
位置：固定；
最高：50%；
左：40%；
转换：翻译（-50%，-50%）；
z指数：2；
边界半径：50%；
/*动画：circleAnimRev 0.3s缓进缓出向前*/
}
#背托{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：自动；
z指数：1；
}
.圆形的{
动画：circleAnim 0.3s轻松进退向前！重要；
}
.circleAnimRev{
动画：circleAnimRev 0.3s缓进缓出向前；
}
@关键帧循环{
形式{
左：40%；
}
到{
左：60%；
}
}
@关键帧circleAnimRev{
从{
左：60%；
}
到{
左：40%；
}
}

删除此
动画：circleAnimRev 0.3s快进快出向前来自您的风格。非常感谢您的工作，非常好。我在想什么呢，比如我加一个布尔值，把它设为false，然后用它来做同样的逻辑？！
const circle = document.getElementById('circle');
circle.addEventListener('click', ()=>{
    circle.classList.toggle("circleAnimated");
});