Javascript CSS动画在菜单按钮中不起作用

下面是我的javascript代码

function change(x) {
      if(!document.querySelector(".animate")){
      x.classList.add("animate");
      x.classList.remove("animater");
      }else{
      x.classList.remove("animate");
      x.classList.add("animater");
    }

现在，动画第一次工作，但当我多次单击它时，它只显示没有动画的结束状态。Animator包含三个类，所有这些类都在工作，Animator也是如此。div还将信息正确地传递给函数

以下是完整的代码：

功能更改（x）{
如果（！document.querySelector（“.animate”））{
x、 添加（“动画”）；
x、 移除（“动画制作者”）；
}否则{
x、 类列表。移除（“动画”）；
x、 添加（“动画师”）；
}
}

正文{
背景：#3FAF82；
文本对齐：居中；
}
.line1，
.line2，
.line3{
保证金：0px自动；
边缘顶部：10px；
高度：5px；
宽度：80px；
背景色：白色；
边界半径：5px；
盒影：1px2px10px0pxRGBA（0,0,0,0.3）；
过渡：均为0.8s；
}
.台词{
边缘顶部：50px；
光标：指针；
}
.制作动画.line3{
动画：向前改变3缓1 0.8秒；
}
.动画师.第3行{
动画：改变3缓1 0.8秒正反转；
}
.制作动画.line1{
动画：向前改变1缓1 0.8秒；
}
.动画师.第1行{
动画：改变1轻松1 0.8秒反向前进；
}
.制作动画.线条2{
宽度：0px；
}
.动画师.第2行{
宽度：80px；
}
@关键帧更改3{
0% {
变换：平移3D（0,0,0）旋转（0度）；
}
50% {
变换：平移3d（0，-15px，0）旋转（0度）；
}
100% {
变换：平移3d（0，-15px，0）旋转（-45度）；
}
}
@关键帧更改1{
0% {
-webkit变换：平移3D（0,0,0）旋转（0度）；
变换：平移3D（0,0,0）旋转（0度）；
}
50% {
-webkit变换：平移3D（0，15px，0）旋转（0）；
变换：平移3d（0，15px，0）旋转（0）；
}
100% {
-webkit变换：平移3D（0，15px，0）旋转（45度）；
变换：平移3d（0，15px，0）旋转（45度）；
}
}
}

---

这个类的

动画师

有css属性，这会影响动画制作过程

我刚刚删除了添加和删除Animator的行，我在代码中没有看到这个类的任何用途

---

这就是新的代码笔：

这里的问题是，您使用的是相同的动画，因此通过添加删除类，您不会更改动画，您只需更改动画的某些属性，这样动画就不会再次运行

要避免这种情况，请使用两种不同的动画

功能更改（x）{
如果（！document.querySelector（“.animate”））{
x、 移除（“动画制作者”）；
x、 添加（“动画”）；
}否则{
x、 类列表。移除（“动画”）；
x、 添加（“动画师”）；
}
}

正文{
背景：#3FAF82；
文本对齐：居中；
}
.line1，
.line2，
.line3{
保证金：0px自动；
边缘顶部：10px；
高度：5px；
宽度：80px；
背景色：白色；
边界半径：5px；
盒影：1px2px10px0pxRGBA（0,0,0,0.3）；
过渡：均为0.8s；
}
.台词{
边缘顶部：50px；
光标：指针；
}
.制作动画.line3{
动画：向前改变3缓1 0.8秒；
}
.动画师.第3行{
动画：向前更改3_rev ease 1 0.8秒；
}
.制作动画.line1{
动画：向前改变1缓1 0.8秒；
}
.动画师.第1行{
动画：向前更改1_rev ease 1 0.8秒；
}
.制作动画.线条2{
宽度：0px；
}
.动画师.第2行{
宽度：80px；
}
@关键帧更改3{
0% {
变换：平移3D（0,0,0）旋转（0度）；
}
50% {
变换：平移3d（0，-15px，0）旋转（0度）；
}
100% {
变换：平移3d（0，-15px，0）旋转（-45度）；
}
}
@关键帧更改3_rev{
100% {
变换：平移3D（0,0,0）旋转（0度）；
}
50% {
变换：平移3d（0，-15px，0）旋转（0度）；
}
0% {
变换：平移3d（0，-15px，0）旋转（-45度）；
}
}
@关键帧更改1{
0% {
-webkit变换：平移3D（0,0,0）旋转（0度）；
变换：平移3D（0,0,0）旋转（0度）；
}
50% {
-webkit变换：平移3D（0，15px，0）旋转（0）；
变换：平移3d（0，15px，0）旋转（0）；
}
100% {
-webkit变换：平移3D（0，15px，0）旋转（45度）；
变换：平移3d（0，15px，0）旋转（45度）；
}
}
@关键帧更改1_rev{
100% {
-webkit变换：平移3D（0,0,0）旋转（0度）；
变换：平移3D（0,0,0）旋转（0度）；
}
50% {
-webkit变换：平移3D（0，15px，0）旋转（0）；
变换：平移3d（0，15px，0）旋转（0）；
}
0% {
-webkit变换：平移3D（0，15px，0）旋转（45度）；
变换：平移3d（0，15px，0）旋转（45度）；
}
}
}

---

此类用于以相反的方向运行动画，实际上您的代码没有达到预期效果，只有第一个动画工作正常，而另一个动画工作正常