是否可以使用 DOM 而不是 Jquery 重新創建此影片？如果是這樣怎么辦？
$('.bubbles-animation')
.animate({
'bottom': '100%',
'opacity' : '-=0.7'
}, 2000, function(){
$(this).remove()
}
);
uj5u.com熱心網友回復：
jQuery 只是底層的 js 和 css。絕對有可能在 vanilla js 中重新創建任何 jquery 操作。如果您想創建 jquery 操作的 1:1 副本，您可以檢查源代碼以查看 jquery 如何完成任務。但是，如果您需要做的只是使用 vanilla js 創建影片然后洗掉元素，這里是如何完成此操作的演示。
我的整個代碼片段都包含在一個異步匿名函式中，該函式將立即被呼叫。這可以防止我的代碼范圍內的命名沖突，并且還允許我訪問await關鍵字。
首先，我創建了兩個輔助函式。$這樣我就可以以類似于 jquery 的方式從 DOM 中獲取元素。該wait輔助函式回傳一個承諾，超時后消失。
我在更改不透明度之前等待 1000 毫秒或 1 秒，這是個人對影片時間的偏好。
更改不透明度后，我再等 2 秒，這也是顯示過渡所需的時間，然后我洗掉元素。
請記住，這只會針對第一個具有 類的元素bubbles-animation，我還想補充一點，我個人更喜歡更改高度的過渡而不是不透明度，因為在我看來，它可以更平滑地折疊其他元素。
css 是不言自明的，但如果您有任何問題，我建議您查看 此演示
(async () => {
const $ = str => document.querySelector(str);
const wait = t => new Promise(r => setTimeout(r, t));
await wait(1000);
$(".bubbles-animation").style.opacity = "0.3";
await wait(2000);
$(".bubbles-animation").remove();
})();.bubbles-animation {
transition: opacity 2s;
}<div class="bubbles-animation">Vanish!</div>
<div>Stay!</div>uj5u.com熱心網友回復：
是的，您可以依靠 CSS 過渡來實作它。但是，這取決于您將嘗試實作的目標。沒有足夠的資訊在反射中走得更遠。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
document.getElementById('css-js')
.addEventListener('click',
() => document.querySelector('.bubbles').classList.add('animation'))
document.getElementById('reset')
.addEventListener('click',
() => document.querySelector('.bubbles').classList.remove('animation'))#settings {
position: fixed;
top: 0px;
}
.bubbles {
position: absolute;
height: 100%;
top: 0px;
width: 100%;
background-color: green;
transition-property: transform, opacity;
transition-duration: 2s, 1.5s;
}
.animation {
opacity: 0;
transform: translateY(-100%);
}<div class=bubbles></div>
<div id=settings>
<button id=css-js>CSS & Native JS</button>
<button id=reset>Reset</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342858.html
標籤：javascript 查询 动画片 dom
上一篇：沒有css的SVG影片