第一次单击时播放关键帧动画，然后第二次反向播放
[英]Play a keyframe animation on first click and play back in reverse on second
问题描述
I am trying to complete a wave animation that has the animation, fills the screen to a certain point and stops on the first click on a navigation menu. 
我正在尝试完成一个具有动画的wave动画，将屏幕填充到特定点并在导航菜单的第一次单击上停止。 I have tried making it play the animation back in reverse when you click the navigation menu again, but it will not work. 当您再次单击导航菜单时，我尝试使其反向播放动画，但是它将不起作用。 Does anyone know if this is possible with Java/ JQuery, and if so how do you do it? 有谁知道Java / JQuery是否可以实现，如果可以，您该怎么做？ Currently all it does is a harsh clip back to the previous state, and I don't like how harshly it clips. 当前，它所做的只是将剪辑严格还原到以前的状态，我不喜欢剪辑的严格程度。
$(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
The last line in the JS portion of your code adds a clicked class to the .circ element. 代码JS部分的最后一行将一个clicked类添加到.circ元素。 Once that class is on, the second click on your hamburger menu icon will trigger new unwave animation I made by just reversing the to and from values of the original wave animation. 一旦类是，在你的汉堡包菜单图标第二次点击就会触发新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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在单击时播放关键帧动画？ - How can I play a keyframe animation on click?
第一次单击动画时，第二次反向动画时：如何？ - On first click animate, on second reverse animation: how to?
每 5 秒播放一次关键帧 animation - Making keyframe animation play after every 5 seconds
二次单击即可反转动画 - Reverse animation on a second click
单击时播放Javascript声音，第二个按钮单击停止第一个声音 - Javascript play sound on click, second button click stop first sound
简单的动画播放/反向按钮 - Simple animation play/reverse button
使用Javascript反转关键帧动画 - Reverse Keyframe animation with Javascript
第二次单击时 jquery 反向动画 - jquery reverse animation on second click
鼠标离开时反向播放动画JS。 - Reverse play animation JS when mouseleave.
如何：第一次单击动画1，第二次单击动画2 - HowTo: First click animation 1, second click animation 2
相关标签