当使用 JQ 或 JS 切换类时，如何添加 CSS 过渡或动画？

Question

我会在我的班级切换时添加一些过渡或动画，例如，在下面的代码中，我有一个侧边栏，我已经添加了一些动画，使用 CSS 动画库。当侧边栏打开时，我将它与另一个类切换，动画工作，但当它关闭时，动画不再工作。关于我想要什么的更多细节：1- 我打算当 sidebar1 类与 sidebar_menu 切换时，一些动画或过渡会增长以应用于它，正如我在顶部解释的那样，我的意思是当侧边栏被关闭时动画或过渡增长以应用于它2-侧边栏打开时没问题，我只想要侧边栏通过动画打开，通过动画关闭时，如果我解释不好，我很抱歉。如果有任何问题请问我会回答这是我制作的演示，我认为它显示了我的意思更好的 演示这是我的 JQ 代码：$(document).ready(function() {   $(".response_menu_icon").click(function() {      $(".sidebar1").toggleClass("sidebar_menu");   });   //   $(".response_more_icon").click(function() {      $(".area1").toggleClass("area_more");   });});这是我的 HTML 代码：<i data-feather="more-horizontal" class="response_more_icon"></i><!--  --><a href="" class="sidebar1 animate__animated animate__slideInRight">     <div class="sidebar_right">        <!--  -->        <h4>Dashboard</h4>        <a href=""><i data-feather="settings"></i><span>dashboard</span></a>        <!--  -->     </div></a>这是我的 CSS 代码：.sidebar1 {   display: none;}.sidebar_menu {   // display: none;   width: 250px;   height: 100%;   position: fixed;   top: 80px;   display: flex;   flex-wrap: wrap;   flex-direction: column;   text-align: center;   background-color: #ffffff;   -webkit-box-shadow: -2px 10px 8px 3px #eeeeee;   -moz-box-shadow: -2px 10px 8px 3px #eeeeee;   box-shadow: -2px 10px 8px 3px #eeeeee;}

Answer 1

这就是我认为你可以做到的。您检查该类是否已应用并根据此添加动画。

 feather.replace();

$(document).ready(function() {

   $(".response_menu_icon").click(function() {

        if($(".sidebar1").hasClass("sidebar_menu")){

                $(".sidebar1").addClass("animate__slideOutRight");

           setTimeout(function(){$(".sidebar1").toggleClass("sidebar_menu");},200);

                      

         } else {

                $(".sidebar1").removeClass("animate__slideOutRight");

                $(".sidebar1").addClass("sidebar_menu");

            $(".sidebar1").addClass("animate__slideInRight");

       };

     //$(".sidebar1").addClass("animate__slideOutRight");

   });

   //

   $(".response_more_icon").click(function() {

      $(".area1").toggleClass("area_more");

   });

});

动画播放完毕后，我使用设置的超时时间删除类。

Answer 2

您可以使用 jQuery 或 JS 添加您的类，并让您的 CSS 处理您向新位置的过渡。

例如：

你有一个侧边栏，当点击一个按钮打开然后再次点击关闭。

侧边栏 CSS 将具有侧边栏起点（即位置）。然后你可以为你要添加到你希望元素等的结束位置的其他类设置样式。

 //starting position is hidden off the screen

#sidebar{

    position: absolute;

    top: 0px;

    left: -250px;

    width: 250px;

    height: 100vh;

    background-color: blue;

    transition: ease left .3s;

}

//brings the element into view when opened

#sidebar.toggled{

  left: 250px;

}

然后，您可以根据需要单击按钮添加课程。