CSS 动画循环无法正常工作

Question

我为两个动画创建了两个类，按下按钮应该首先使用一个动画打开和关闭全屏，然后在第二次按下按钮后使用另一个动画。

CSS Animate 启用全屏，animatereverse 禁用它

    #mv {
        width: 100%;
        height: 57%;
    }

    .animate {
        animation: fullscreen 0.5s;
        animation-fill-mode: forwards;
    }

    @keyframes fullscreen {
        from {
            height: 57%;
        }

        to {
            height: 100%;
        }
    }


    .animatereverse {
        animation: fullscreenreverse 0.5s;
        animation-fill-mode: forwards;
    }

    @keyframes fullscreenreverse {
        from {
            height: 100%;
        }

        to {
            height: 57%;
        }
    }

TS/JS 我使用了一个标志来让函数知道界面是否全屏

      var fullscreen = false;
      //console.log(" fullscreen now false ");
        document.getElementById('fllbtn').addEventListener("click", function () {          
          if(fullscreen == false){     
            //console.log(" fullscreen is false ");
            fullscreen = true;
            //console.log(" fullscreen now true ");
            document.getElementById("mv").classList.toggle("animate");
          }else{
            //console.log(" fullscreen is true ");
            fullscreen = false;
            //console.log(" fullscreen now false ");
            document.getElementById("mv").classList.toggle("animatereverse");
          }
        })

问题如下：

开始
*非全屏界面
*我按全屏按钮
*动画有效，界面变为全屏
*我按全屏按钮
*动画有效，界面返回初始非全屏状态
*我按全屏按钮
*动画不工作，不全屏
*我按全屏按钮
*动画不工作，不进入全屏
结尾

把它想象成一个循环，它基本上跑了两次，跳了两次，像这样重复。

Answer 1

@ 987654321@不存在时会添加类是当下。
这意味着：

1. 第一个全屏是点击
2. 第一次切换运行； .animate 类被添加到 #mv
3. 第二次全屏点击
4. 函数第二次运行，.animatereverse 被添加到#mv
5. #mv 现在有两个类 .animate 和 .animatereverse
6. 第三次单击全屏
7. 函数再次运行，为.animate. 触发切换，这将从#mv 中删除.animate 类 1.#mv 现在只有.animatereverse 你没有看到任何动画，因为没有应用新的动画

   您可以尝试显式添加和删除类，而不是使用切换。

   var fullscreen = false;
   
   document.getElementById('fllbtn').addEventListener("click", function() {
     fullscreen = !fullscreen;
     if (fullscreen) {
       document.getElementById("mv").classList.remove("animatereverse");
       document.getElementById("mv").classList.add("animate");
     } else {
       document.getElementById("mv").classList.add("animatereverse");
       document.getElementById("mv").classList.remove("animate");
     }
   
   })

   #mv {
     width: 100%;
     height: 57%;
     padding: 2rem;
     background-color: salmon;
   }
   
   .animate {
     animation: fullscreen 0.5s;
     animation-fill-mode: forwards;
   }
   
   @keyframes fullscreen {
     from {
       height: 57%;
     }
     to {
       height: 100%;
     }
   }
   
   .animatereverse {
     animation: fullscreenreverse 0.5s;
     animation-fill-mode: forwards;
   }
   
   @keyframes fullscreenreverse {
     from {
       height: 100%;
     }
     to {
       height: 57%;
     }
   }
   
   .wrapper {
     position: relative;
     height: 150px;
     width: 300px;
   }

   <button id="fllbtn">fullscreen</button>
   <div class="wrapper">
     <div id="mv">
       i'm mv
     </div>
   </div>