Question

我正在尝试为移动应用程序构建一个类似于Pinterest径向菜单的动画菜单。我已经设法将行为发送到我想要的地方，除了一个小细节：当菜单打开时，项目按照我的要求拍摄，当你将它们悬停在它们上面时，它们会按照我的要求进行转换。问题是，在光标离开项目后，它们会重新触发原始动画，而不是仅仅返回其先前的状态。我意识到这与用于动画的类有关，我尝试了许多解决方案，包括删除类并添加新的.onmouseover（）并在hover / mousover上更改动画运行状态。我可能会遗漏一些简单而愚蠢的东西，但我无法看到它。有人可以帮忙吗？

以下代码就是我在尝试实施解决方案之前的方式。

HTML：

<!--Footer-->
<div class="footer">
  <!--RADIAL NAV MENU-->
  <div id="navContainer">
    <!--Buttons-->
    <div id="workouts" class="sml smlOne">Go there</div>
    <div id="home" class="sml smlTwo">Go here</div>
    <div id="profile" class="sml smlThree">Go somewhere</div>
    <!--Burger-->
    <div class="burger-menu">
      <div id="top" class="bar barTop"></div>
      <div id="middle" class="bar barMid"></div>
      <div id="bottom" class="bar barBot"></div>
    </div>
  </div>
</div>

CSS：

.footer
{
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 50px;
  background-color: #d36363;
  box-shadow: 0px -6px 6px #888888;
  z-index: +2;
}

/* Burger menu section */
#navContainer
{
  text-align: center;
  font-size: 10px;
}

.burger-menu
{
  position: relative;
  margin: auto;
  height: 100%;
  width: 50px;
}

.bar
{
  height: 6px;
  width: 100%;
  background-color: white;
}

#top
{
  position: relative;
  top: 5px;
}

#middle
{
  position: relative;
  top: 15px;
}

#bottom
{
  position: relative;
  top: 25px;
}

.barTop, .barMid, .barBot
{
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.barTopOn
{
  transform: rotate(45deg) translateY(12px) translateX(11px);
}

.barMidOn
{
  opacity: 0;
}

.barBotOn
{
  transform: rotate(-45deg) translateY(-12px) translateX(11px);
}

/* Navigation buttons section */
#navContainer
{
  position: relative;
  margin: auto;
  width: 50px;
}

.sml
{
  border: 2px solid #58a7dd;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 6px 6px 6px #888888;
  transform: scale(0);
}

#workouts
{
  position: absolute;
  bottom: 10px;
  left: -60px;
}

#home
{
  position: absolute;
  bottom: 50px;
}

#profile
{
  position: absolute;
  bottom: 10px;
  left: 60px;
}

.smlOnOne
{
  animation: pop, slideOne 0.1s ease-in;
  animation-fill-mode: forwards;
}

.smlOnTwo
{
  animation: pop, slideTwo 0.1s ease-in;
  animation-fill-mode: forwards;
}

.smlOnThree
{
  animation: pop, slideThree 0.1s ease-in;
  animation-fill-mode: forwards;
}

.smlOnOne:hover
{
  background-color: red;
  border: none;
  box-shadow: 6px 10px 18px #686868;
  animation: whopL 0.2s;
  animation-fill-mode: forwards;
}

.smlOnTwo:hover
{
  background-color: red;
  border: none;
  box-shadow: 6px 10px 18px #686868;
  animation: whopC 0.2s;
  animation-fill-mode: forwards;
}

.smlOnThree:hover
{
  background-color: red;
  border: none;
  box-shadow: 6px 10px 18px #686868;
  animation: whopR 0.2s;
  animation-fill-mode: forwards;
}

@keyframes pop
{
  100%
  {
    transform: scale(1,1);
  }
}

@keyframes slideOne
{
  0%
  {
    bottom: -20px;
    left: 0px;
  }
  100%
  {
    bottom: 10px;
    left: -60px;
  }
}

@keyframes slideTwo
{
  0%
  {
    bottom: -20px;
  }
  100%
  {
    bottom: 50px;
  }
}

@keyframes slideThree
{
  0%
  {
    bottom: -20px;
    left: 0px;
  }
  100%
  {
    bottom: 10px;
    left: 60px;
  }
}

@keyframes whopL
{
  0%
  {
    transform: scale(1,1) translateY(0px) translateX(0px);
  }
  100%
  {
    transform: scale(1.5) translateY(-10px) translateX(-10px);
  }
}

@keyframes whopC
{
  0%
  {
    transform: scale(1,1) translateY(0px) translateX(0px);
  }
  100%
  {
    transform: scale(1.5) translateY(-10px);
  }
}

@keyframes whopR
{
  0%
  {
    transform: scale(1,1) translateY(0px) translateX(0px);
  }
  100%
  {
    transform: scale(1.5) translateY(-10px) translateX(10px);
  }
}

JS / jQuery的：

$(".burger-menu").click(function()
{
  $(".barTop").toggleClass("barTopOn");
  $(".barMid").toggleClass("barMidOn");
  $(".barBot").toggleClass("barBotOn");
  $(".smlOne").toggleClass("smlOnOne");
  $(".smlTwo").toggleClass("smlOnTwo");
  $(".smlThree").toggleClass("smlOnThree");
  });

这是一个有效的演示： https://codepen.io/BGGrieco/pen/NgjxXq

Answer 1

你有一个元素是一组@ -webkit-keyframes来动画。在汉堡包菜单上点击，这些关键帧运行，并且效果很好。

接下来，你在悬停时有第二组@ -webkit-keyframes，所以在悬停时效果也很好。

但是，当鼠标远离元素时，第一个（介绍）关键帧组会再次运行。你不希望它在第一次运行后运行。

以下是我能够完成的事情： https://codepen.io/CapySloth/pen/RgxKEb

<div id="workouts" class="sml smlOne">
  <div class="test1">
    <a href="">Go there</a>
  </div>
</div>

我没有将包含关键帧动画的类堆叠到一个“.sml”类上，而是将任务分成两个元素。 “.sml”现在充当包装器，负责“汉堡菜单打开”动画，“test1 a”负责“whop”动画。

如果你能找到隐藏/显示“test1 a / test2 a / test3 a”的父母的方法，那么你将拥有你想要的东西。

Answer 2

您可以在.toggleClass之前使用.stop（）。

$("#example").stop().toggleClass("class");

多个CSS动画：如何避免重新触发其中一个动画？

2 个答案: