首頁猿問如何在 vanilla...

如何在 vanilla js/css 中復制 jquery 動畫序列

JavaScript

慕姐8265434 2023-11-02 17:25:30

正如標題所說，我想復制下面的動畫。jquery API https://api.jquery.com/toggle/分貝此默認行為如下：easing (default: swing)Type: StringA string indicating which easing function to use for the transition.但我不明白過渡是如何進行的。我嘗試過改變不透明度、翻譯元素等，但顯然沒有運氣。如果沒有 jquery 就不可能以簡單的方式做到這一點，那么沒有切換功能的過渡效果的答案也是可以接受的（但不是，hide()因為show()我已經嘗試過這些并且無法讓它正常工作）。是的，如果可能的話，我更喜歡搖擺過渡。任何幫助表示贊賞。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貢獻1816條經驗獲得超6個贊

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

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

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

});

在普通的JS中？

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

具有數據屬性：

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：

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

如果您仍然想要動畫：

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

我希望我能幫忙

反對回復 2023-11-02

犯罪嫌疑人X

TA貢獻2080條經驗獲得超4個贊

您可以切換一個類并使用 css 轉換來完成它

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;

}

easing text transion

</div>

反對回復 2023-11-02

2 回答
0 關注
168 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 vanilla js/css 中復制 jquery 動畫序列

如何在 vanilla js/css 中復制 jquery 動畫序列

2 回答

添加回答