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

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

菜單打開和關(guān)閉動畫

菜單打開和關(guān)閉動畫

我有問題,當(dāng)我打開菜單時,我需要這樣的動畫:@keyframes opening {  from {    clip-path: circle(0% at 5%, 10%)  }  to {    clip-path: circle(100%)  }}@keyframes closing {  from {    clip-path: circle(100%)  }  to {    clip-path: circle(0% at 5%, 10%)  }}在我的菜單上.menu {  position: fixed;  height: 100vh;  width: 100vw;  top: 0;  background: #1f1f1f;  display: none;}菜單漢堡包是按鈕,我使用 javascript 打開和關(guān)閉它,同時在我的按鈕上添加 .classList.toggle(class - display: block)但是關(guān)閉動畫并不像我想要的那樣工作我也嘗試使用 transform CSS 和其他東西,但它并沒有像我在關(guān)鍵幀看到的那樣給我安全效果我嘗試在 CSS .opening {anination-name:opening, duration and etc.} 中做一個類,在我嘗試用 javascript 添加它(切換、settimeout adn 等)之后,菜單關(guān)閉動畫效果不佳
查看完整描述

2 回答

?
一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗 獲得超2個贊

為此, atransition更合適:


document.addEventListener('click', () =>

  document.querySelector('.menu').classList.toggle('open')

)

.menu {

  position: fixed;

  height: 100vh;

  width: 100vw;

  top: 0;

  background-color: #1f1f1f;

  clip-path: circle(0% at 5% 10%);

  transition: clip-path 2s;

}


.menu.open{

  clip-path: circle(100%);

}

<div class="menu" ></div>

Click anywhere to try out effect


查看完整回答
反對 回復(fù) 2023-05-19
?
慕森王

TA貢獻(xiàn)1777條經(jīng)驗 獲得超3個贊

  Just adding basic demo code for your undestanding. 


.loader {

      width: 56px;

      height: 56px;

      border: 8px solid transparent;

      border-top-color: $warning;

      border-bottom-color: $warning;

      border-radius: 50%;

      animation: loader-rotate 1s linear infinite;

      top: 50%;

      margin: -28px auto 0;

    }

    

    @keyframes loader-rotate {

      0% {

        transform: rotate(0); }

      100% {

        transform: rotate(360deg); }

     }


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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