如何使用 Javascript vanilla 為元素設(shè)置動畫？與 jquery 類似。例子：$( "button.continue" ).animate({left: "100px", top: "200px"}, 5000);我們在何處傳遞屬性、所需值和時間。在我的情況下，我需要左側(cè)和頂部位置來制作動畫和滑動。解決方案我已經(jīng)完成了@IceMetalPunk sugested 并僅在需要動畫時才通過 css 添加動畫。document.getElementById("animate").addEventListener("click", function(){ let e = document.getElementById('elementToAnimate'); e.classList.add("animate"); setTimeout(()=> e.classList.remove("animate"), 500); e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px'; e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';});document.getElementById("dontAnimate").addEventListener("click", function(){ let e = document.getElementById('elementToAnimate'); e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px'; e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';});#elementToAnimate { width: 20px; height: 20px; background: red; position: absolute; top: 0; left: 0;}#elementToAnimate.animate { transition: left 500ms ease-in-out, top 500ms ease-in-out;}<div id="elementToAnimate"></div><button id="animate">Animate</button><button id="dontAnimate">Dont Animate</button>
使用 Javascript vanilla 動畫元素
瀟湘沐
2021-11-12 15:29:57
