我是Web Dev的新手，我正在使用不同的在線平臺（YouTube，Udemy，StackSkills等）自學?，F在，我正試圖專注于學習HTML，CSS和JavaScript / JQuery的基礎知識。我為我正在研究的自定義網站創建了這個漢堡菜單，以幫助我學習，我想嘗試在超過一定時間閾值后停止彈跳漢堡包菜單。我嘗試使用JQuery創建一個類，然后我可以使用CSS動畫持續時間屬性，但它完全停止了反彈。這就是我使用JQuery和CSS所做的，試圖獲得我想要的效果，完全停止反彈動畫效果，而不是在5秒后停止它：JQueryfunction bounceDuration() {document.querySelector('.hamburger-menu').classList.toggle('bounce-duration');};斷續器.hamburger-menu.bounce-duration {animation-duration: 5s;}在下面，您將找到我擁有的全部當前工作代碼（HTML，CSS和JQuery）。如您所見，漢堡包菜單無限期地反彈，我想以某種方式給它一個超時或某種持續時間。任何這方面的幫助都非常感謝。function sidebarToggle() { document.querySelector(".hamburger-menu").addEventListener("click", () => { document.querySelector('.hamburger-menu').classList.toggle('bounce-stop'); document.querySelector(".container").classList.toggle("sidebar-toggle"); });}sidebarToggle()* { margin: 0; padding: 0; outline: none; box-sizing: border-box; list-style: none; text-decoration: none;}.hamburger-menu { width: 3rem; height: 3rem; position: fixed; top: 5rem; right: 5rem; z-index: 200; display: flex; flex-direction: column; justify-content: space-evenly; cursor: pointer; transition: 0.7s;}.hamburger-menu.bounce-stop { animation-name: none;}.line { width: 100%; height: 0.2rem; background-color: #fff; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);}/* Hamburger Menu Bounce --------------------- Description: - Up/Down animation*/.hamburger-menu { -moz-animation: bounce 1s infinite alternate; -o-animation: bounce 1s infinite alternate; -webkit-animation: bounce 1s infinite alternate; animation: bounce 1s infinite alternate; animation-duration: 0.5s;}@-moz-keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); }}@-o-keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); }}
一旦頁面加載，我如何讓我的彈跳漢堡包菜單在經過一定秒數后停止彈跳？
收到一只叮咚
2022-08-27 13:47:53
