第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當(dāng)使用 JQ 或 JS 切換類時,如何添加 CSS 過渡或動畫?

當(dāng)使用 JQ 或 JS 切換類時,如何添加 CSS 過渡或動畫?

MMMHUHU 2023-05-11 14:11:57
我會在我的班級切換時添加一些過渡或動畫,例如,在下面的代碼中,我有一個側(cè)邊欄,我已經(jīng)添加了一些動畫,使用 CSS 動畫庫。當(dāng)側(cè)邊欄打開時,我將它與另一個類切換,動畫工作,但當(dāng)它關(guān)閉時,動畫不再工作。關(guān)于我想要什么的更多細節(jié):1- 我打算當(dāng) sidebar1 類與 sidebar_menu 切換時,一些動畫或過渡會增長以應(yīng)用于它,正如我在頂部解釋的那樣,我的意思是當(dāng)側(cè)邊欄被關(guān)閉時動畫或過渡增長以應(yīng)用于它2-側(cè)邊欄打開時沒問題,我只想要側(cè)邊欄通過動畫打開,通過動畫關(guān)閉時,如果我解釋不好,我很抱歉。如果有任何問題請問我會回答這是我制作的演示,我認為它顯示了我的意思更好的 演示這是我的 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;}
查看完整描述

2 回答

?
慕容3067478

TA貢獻1773條經(jīng)驗 獲得超3個贊

這就是我認為你可以做到的。您檢查該類是否已應(yīng)用并根據(jù)此添加動畫。


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

   });

});

動畫播放完畢后,我使用設(shè)置的超時時間刪除類。


查看完整回答
反對 回復(fù) 2023-05-11
?
臨摹微笑

TA貢獻1982條經(jīng)驗 獲得超2個贊

您可以使用 jQuery 或 JS 添加您的類,并讓您的 CSS 處理您向新位置的過渡。


例如:


你有一個側(cè)邊欄,當(dāng)點擊一個按鈕打開然后再次點擊關(guān)閉。


側(cè)邊欄 CSS 將具有側(cè)邊欄起點(即位置)。然后你可以為你要添加到你希望元素等的結(jié)束位置的其他類設(shè)置樣式。


?//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;

}

然后,您可以根據(jù)需要單擊按鈕添加課程。


查看完整回答
反對 回復(fù) 2023-05-11
  • 2 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號