第一次單擊時播放關鍵幀動畫，然后第二次反向播放
[英]Play a keyframe animation on first click and play back in reverse on second
問題描述
我正在嘗試完成一個具有動畫的wave動畫，將屏幕填充到特定點並在導航菜單的第一次單擊上停止。 當您再次單擊導航菜單時，我嘗試使其反向播放動畫，但是它將不起作用。 有誰知道Java / JQuery是否可以實現，如果可以，您該怎么做？ 當前，它所做的只是將剪輯嚴格還原到以前的狀態，我不喜歡剪輯的嚴格程度。
$(document).ready(function() { $('.hb_menu').click(function() { $('.line_1').toggleClass("rotate_1"); $('.line_2').toggleClass("rotate_2"); $('.line_3').toggleClass("rotate_2"); $('.hidden_svg').toggleClass("show_svg"); $('.circ').toggleClass("rotate_circ"); }); });
body { font-family: 'Raleway', Arial, Verdana, sans-serif; overflow-x: hidden; } a { text-decoration: none; color: white; } .main_hd_cont { position: absolute; top: -1.25vw; left: 1.5vw; z-index: 4; color: white; } .main_hd_txt { font-size: 3.5vw; font-family: 'ballet_harmonyballet_harmony'; } .navigation_svg { position: absolute; top: 0; left: 0; z-index: 1; max-width: 100vw; width: 100vw; } .visible_svg { filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6)); } .hidden_svg { position: absolute; top: 0; left: 0; opacity: 0; transition: 1s; z-index: 2; filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6)); } .show_svg { opacity: 1; } .hb_menu { max-width: 2vw; width: 2vw; max-height: 1.75vw; height: 1.75vw; position: absolute; right: 1.5vw; top: 1.5vw; z-index: 4; } .line_1, .line_2, .line_3 { max-width: 2vw; width: 2vw; max-height: .25vw; height: .25vw; background-color: #fff; position: absolute; right: 0; z-index: 2; top: 0vw; transition: .5s all; margin-bottom: .25vw; } .line_2 { top: .5vw; } .line_3 { top: 1vw; } .rotate_1 { transform: rotate(45deg); } .rotate_2 { transform: rotate(-45deg); top: 0vw; } .main_nav_cont { max-width: 50vw; width: 50vw; max-height: 50vw; height: 50vw; position; absolute; top: 25vw; left: 25vw; font-size: 1.75vw; z-index: 4; } .circ { position: absolute; top: -41vw; max-width: 45vw; width: 45vw; max-height: 48vw; height: 48vw; background-color: #8C572B; border-radius: 14.6675vw; } .rotating_circle_1 { left: -10vw; } .rotating_circle_2 { left: 10vw; } .rotating_circle_3 { left: 30vw; } .rotating_circle_4 { left: 50vw; } .rotating_circle_5 { left: 70vw; } .rotate_circ { animation: wave 15s 1 ease-in-out; animation-fill-mode: forwards; } @keyframes wave { from { transform: rotate(360deg); max-height: 48vw; height: 48vw; } to { transform: rotate(-360deg); max-height: 80vw; height: 80vw; } }
<!DOCTYPE html> <html> <head> <title>Code Cafe | Home </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="../JavaScript/main.js"></script> <style> @font-face { font-family: 'ballet_harmonyballet_harmony'; src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } </style> </head> <body> <section class="main_hd_cont"> <header class="main_hd"> <h1 class="main_hd_txt">Hello World</h1> </header> </section> </nav> </section> <section class="hb_menu"> <div class="line_1"></div> <div class="line_2"></div> <div class="line_3"></div> </section> <div class="rotating_circle_1 circ"></div> <div class="rotating_circle_2 circ"></div> <div class="rotating_circle_3 circ"></div> <div class="rotating_circle_4 circ"></div> <div class="rotating_circle_5 circ"></div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2019-04-02 21:37:34
代碼JS部分的最后一行將一個clicked類添加到.circ元素。 一旦類是，在你的漢堡包菜單圖標第二次點擊就會觸發新unwave動畫我剛好顛倒提出to ，並from原來的值wave動畫。
$(document).ready(function() { $('.hb_menu').click(function() { $('.line_1').toggleClass("rotate_1"); $('.line_2').toggleClass("rotate_2"); $('.line_3').toggleClass("rotate_2"); $('.hidden_svg').toggleClass("show_svg"); $('.circ').toggleClass("rotate_circ"); $(".circ").addClass("clicked"); // adds "clicked" after the very first click }); });
body { font-family: 'Raleway', Arial, Verdana, sans-serif; overflow-x: hidden; } a { text-decoration: none; color: white; } .main_hd_cont { position: absolute; top: -1.25vw; left: 1.5vw; z-index: 4; color: white; } .main_hd_txt { font-size: 3.5vw; font-family: 'ballet_harmonyballet_harmony'; } .navigation_svg { position: absolute; top: 0; left: 0; z-index: 1; max-width: 100vw; width: 100vw; } .visible_svg { filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6)); } .hidden_svg { position: absolute; top: 0; left: 0; opacity: 0; transition: 1s; z-index: 2; filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6)); } .show_svg { opacity: 1; } .hb_menu { max-width: 2vw; width: 2vw; max-height: 1.75vw; height: 1.75vw; position: absolute; right: 1.5vw; top: 1.5vw; z-index: 4; } .line_1, .line_2, .line_3 { max-width: 2vw; width: 2vw; max-height: .25vw; height: .25vw; background-color: #fff; position: absolute; right: 0; z-index: 2; top: 0vw; transition: .5s all; margin-bottom: .25vw; } .line_2 { top: .5vw; } .line_3 { top: 1vw; } .rotate_1 { transform: rotate(45deg); } .rotate_2 { transform: rotate(-45deg); top: 0vw; } .main_nav_cont { max-width: 50vw; width: 50vw; max-height: 50vw; height: 50vw; position; absolute; top: 25vw; left: 25vw; font-size: 1.75vw; z-index: 4; } .circ { position: absolute; top: -41vw; max-width: 45vw; width: 45vw; max-height: 48vw; height: 48vw; background-color: #8C572B; border-radius: 14.6675vw; } .rotating_circle_1 { left: -10vw; } .rotating_circle_2 { left: 10vw; } .rotating_circle_3 { left: 30vw; } .rotating_circle_4 { left: 50vw; } .rotating_circle_5 { left: 70vw; } .rotate_circ { animation: wave 15s 1 ease-in-out; animation-fill-mode: forwards; } /* this new rule only applies after you have clicked once AND the wave animation has already been triggered */ .circ.clicked:not(.rotate_circ) { animation: unwave 15s 1 ease-in-out; animation-fill-mode: forwards; } @keyframes wave { from { transform: rotate(360deg); max-height: 48vw; height: 48vw; } to { transform: rotate(-360deg); max-height: 80vw; height: 80vw; } } @keyframes unwave { from { transform: rotate(-360deg); max-height: 80vw; height: 80vw; } to { transform: rotate(360deg); max-height: 48vw; height: 48vw; } }
<!DOCTYPE html> <html> <head> <title>Code Cafe | Home </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="../JavaScript/main.js"></script> <style> @font-face { font-family: 'ballet_harmonyballet_harmony'; src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } </style> </head> <body> <section class="main_hd_cont"> <header class="main_hd"> <h1 class="main_hd_txt">Hello World</h1> </header> </section> </nav> </section> <section class="hb_menu"> <div class="line_1"></div> <div class="line_2"></div> <div class="line_3"></div> </section> <div class="rotating_circle_1 circ"></div> <div class="rotating_circle_2 circ"></div> <div class="rotating_circle_3 circ"></div> <div class="rotating_circle_4 circ"></div> <div class="rotating_circle_5 circ"></div> </body> </html>
單擊時播放Javascript聲音，第二個按鈕單擊停止第一個聲音
[英]Javascript play sound on click, second button click stop first sound
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.