Блог

Я собираюсь добавить некоторый переход или анимацию при переключении моего класса, например, в приведенных ниже кодах, у меня есть боковая панель, в которую я добавил немного анимации с помощью библиотеки анимации 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;
}
  

Вот как, я думаю, вы могли бы это сделать. Вы проверяете, применен ли уже класс, и добавляете анимацию в зависимости от этого.

  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");
   });
});
  

Я использую установленное время ожидания для удаления класса после завершения воспроизведения анимации.

Вы можете добавить свой класс с помощью 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 .