javascript - 第一次单击时播放关键帧动画，第二次单击时反向播放

标签 javascript jquery html css-animations

我正在尝试完成一个具有动画的波浪动画，将屏幕填充到某个点并在第一次单击导航菜单时停止。我尝试让它在您再次单击导航菜单时反向播放动画，但它不起作用。有谁知道 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>

最佳答案

代码 JS 部分的最后一行将 clicked 类添加到 .circ 元素。该类(class)启动后，第二次单击汉堡菜单图标将触发我通过反转 to 和 from 值制作的新 unwave 动画原始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 - 第一次单击时播放关键帧动画，第二次单击时反向播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55483281/

上一篇：javascript - 如何将一系列小时调整为首选时区？

下一篇：javascript - 无法删除热模块替换时的监听器

相关文章：

jquery - 在当前完成之前停止下一个悬停动画的发生

javascript - 如何修复这个window.open IE内存泄漏？

javascript - 如果值 = 0，则显示占位符

javascript - 不在每个页面上包含 JS 和 CSS 文件有什么好处吗？

html - 如何隐藏滚动条，同时保持光标在 css 中向上或向下移动

javascript - jQuery 单击事件样式表更改不起作用

javascript - 将元素环绕在跨度文本周围

javascript - 在加载 Web 表单后加载外部 JavaScript 文件

javascript - 当元素处于事件状态时调用函数

javascript - 所有人评级的可访问属性

©2024 IT工具网  联系我们