Question

好的，所以我正在研究一个我进入中间的项目。该问题包含hover.css和航路点。

我的问题是我有一个按钮，它使用hover.css作为按钮悬停动画。该按钮还使用航点在到达视口时进行动画处理。一切正常，它加载很好，然后当我悬停它动画很好。问题是当我将鼠标悬停在航点动画第二次时。我不能拥有，任何帮助将不胜感激。

按钮HTML：

<div style="width:100%;" class="vert-stack-right"><a href="" class="in_from_left hvr-buzz-out animate_start" target="" title="">My Button</a></div>

悬停Css

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

我知道我使用较旧版本的航点，因为我知道现在已经为this.destroy（）删除了triggerOnce。我试图做更新，但这是我没有做的项目的一部分，我不是任何方式的jQuery wiz。因此，如果有人有关于如何更新代码以使用销毁的建议，请随时给我这个业务。

Waypoint inti JS

jQuery(document).ready(function () {
    "use strict";
    animation_init();
});

function animation_init() {
    jQuery(".in_from_left").waypoint(function () {
        if (!jQuery(this).hasClass("animate_start")) {
            var e = jQuery(this);
            setTimeout(function () {
                e.addClass("animate_start")
            }, 20)
        }
    }, {
        offset: "85%",
        triggerOnce: !0
    })
}

Waypoints Animation Css

/* global */
.in_from_left {
  opacity: 0
}

/* animate from left */
@keyframes animate_left {
  from {
    opacity: 0;
    transform: translateX(-100px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}
@-webkit-keyframes animate_left {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}
.in_from_left.animate_start {
  -webkit-animation: 1.0s cubic-bezier(1,0,0,1) 0s normal backwards 1 animate_left;
  animation: 1.0s cubic-bezier(1,0,0,1) 0s normal backwards 1 animate_left;
  opacity: 1
}

所以回顾一下。一切都按原样运行，直到我将鼠标悬停在按钮上。当我做的时候，动态点动画会像初始加载那样第二次发射，而我们不希望这样。我的一部分感觉它可能与css相关。我过去一天看着它没有运气。正如我所说，我非常感谢你的帮助。

干杯！

Answer 1

以下不是一个完美的答案。你必须得到适合你需求的概念。动画再次触发的原因是因为默认情况下CSS的工作方式。您可以使用JS（检查similar question/answer here。）

来解决这个问题

整个想法是添加in_from_left类，但在动画完成时也将其删除。这样，"hover out"之后它就不会再次发射。

Here's a demo

$(document).ready(function () {
    $('.my-link').addClass('in_from_left').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(e) {
        $(this).removeClass('in_from_left');
    });
    animation_init();
});

function animation_init() {
    $(".my-link").waypoint(function () {
      console.log($(this.element).parent().index());
      var el = $(this.element)
        if (!el.hasClass("animate_start")) {

            setTimeout(function () {
                el.addClass("animate_start").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(e) {
                    $(this).removeClass('animate_start');
                });
            }, 20)
        }
    }, {
        offset: "50%",
        //triggerOnce: !0
    })
}

请记住，我已经更改了很多代码来使用这个jsbin。确保你也检查CSS。您可能不需要animate_start和in_from_left

航点 - 两次动画射击

1 个答案:

Here's a demo