Question

我要在类切换时添加一些过渡或动画，例如，在以下这些代码上，我有一个侧边栏，并使用CSS动画库在其中添加了一些动画。在侧边栏打开时，我已将其与另一个类（动画工作）进行了切换，但是在其关闭时，动画不再起作用。

有关我想要的内容的更多细节：

1-我要用sidebar_menu切换sidebar1类时，就像在顶部解释的那样，会出现一些动画或过渡效果，这意味着当sidebar1处于关闭状态时，动画或过渡效果会发生变化，要应用

>

2-侧栏打开时没问题，我只想通过动画打开侧栏，然后用动画关闭，仅此而已如果我解释不好，我很抱歉。如果有任何问题，请问我会回答

这里是我所做的演示，我认为它更好地显示了我的意思 Demo

这里是我的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;
}

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

下面是一个示例JSFiddle

在MDN进行编码时的另一个有用资源。这是显示CSS Transition属性的其他用途的链接。

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

2 个答案: