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

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何在 vanilla js/css 中復(fù)制 jquery 動(dòng)畫序列

如何在 vanilla js/css 中復(fù)制 jquery 動(dòng)畫序列

慕姐8265434 2023-11-02 17:25:30
正如標(biāo)題所說，我想復(fù)制下面的動(dòng)畫。jquery API https://api.jquery.com/toggle/分貝此默認(rèn)行為如下：easing (default: swing)Type: StringA string indicating which easing function to use for the transition.但我不明白過渡是如何進(jìn)行的。我嘗試過改變不透明度、翻譯元素等，但顯然沒有運(yùn)氣。如果沒有 jquery 就不可能以簡單的方式做到這一點(diǎn)，那么沒有切換功能的過渡效果的答案也是可以接受的（但不是，hide()因?yàn)閟how()我已經(jīng)嘗試過這些并且無法讓它正常工作）。是的，如果可能的話，我更喜歡搖擺過渡。任何幫助表示贊賞。document.addEventListener('click', ()=>{$('#elem').toggle('.hide');});.hide{display:none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id='elem' class= 'hide'>easing text transion</div>
查看完整描述

2 回答

?
瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊

我不知道我是否正確理解你的問題，但你想要


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

$('#elem').toggle('.hide');

});

在普通的JS中？


您有兩個(gè)選擇：將數(shù)據(jù)屬性設(shè)置為#elem，或者檢查#elem 是否具有類.hide。但將 css 添加到元素中更容易


具有數(shù)據(jù)屬性：


<div id='elem' data-status='inv' class='hide'>

easing text transion

</div>

let toggleFunction = function() {

  let elem = document.querySelector('#elem');

  if (elem.dataset.status == "inv") {

    elem.className = "";

    elem.dataset.status = "vis";

  } else if (elem.dataset.status == "vis") {

    elem.className = "hide";

    elem.dataset.status = "inv";

  }

}


document.addEventListener('click', toggleFunction);

或者用CSS：


<div id='elem' style='display: none;'>

easing text transion

</div>

let toggleFunction = function() {

  let elem = document.querySelector('#elem');

  if (elem.style.display == 'none') {

    elem.style.display = 'inherit';

  } else {

    elem.style.display = 'none';

  }

}


document.addEventListener('click', toggleFunction);

如果您仍然想要?jiǎng)赢嫞?/p>


<div id='elem' style='height: 0px;'>

easing text transion

</div>

#elem {

  transition: 1s ease-in-out all;

  overflow-y: hidden;

}

let toggleFunction = function() {

  let elem = document.querySelector('#elem');

  if (elem.style.height == '0px') {

    elem.style.height = '18px';

  } else {

    elem.style.height = '0px';

  }

}


document.addEventListener('click', toggleFunction);

我希望我能幫忙


查看完整回答
反對 回復(fù) 2023-11-02
?
犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以切換一個(gè)類并使用 css 轉(zhuǎn)換來完成它


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

  document.getElementById('elem').classList.toggle('no-height')

})

#elem {

  max-height: 2em;

  transition: max-height 0.5s ease-in-out;

  overflow-y: hidden;

}


#elem.no-height {

  max-height: 0;

}

<div id='elem'>

  easing text transion

</div>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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