CSS動畫是一種非常流行的前端技術,可以為網頁添加各種有趣、生動的交互效果。在制作CSS動畫的過程中,有時候需要用到JavaScript來實現更加復雜的交互效果。下面我們一起來了解下CSS動畫和JavaScript結合使用的例子。
/* CSS代碼 */ @keyframes shake { from, to { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(10px); } 20%, 40%, 60%, 80% { transform: translateX(-10px); } } .element { animation: shake 1s infinite; } /* JavaScript代碼 */ const element = document.querySelector('.element'); element.addEventListener('animationend', () =>{ element.classList.remove('shake'); void element.offsetWidth; /* 強制重新布局,使下一次添加class動畫重新生效 */ element.classList.add('shake'); });
在上面的代碼中,我們首先定義了一個名為“shake”的CSS動畫。接著,在一個class為“element”的HTML元素上應用了這個動畫。這樣,該元素就會不停地抖動起來。
但是在某些情況下,我們可能需要在動畫結束時,對該元素進行一些操作,比如將其隱藏起來、更換背景顏色等等。這個時候,我們就可以使用JavaScript來捕捉動畫結束的事件(animationend),并執行相應的操作。在上面的代碼中,我們就監聽了“element”的animationend事件,并在事件回調函數中改變該元素的class,從而重新觸發動畫。
綜上所述,CSS動畫和JavaScript結合,可以實現非常強大和靈活的交互效果,極大地提升了網頁的用戶體驗。
下一篇2018制作vue