Waypoints - 动画触发两次

Question

好的，所以我正在进行一个我参与的项目。该问题包含 hover.css 和 waypoints.

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

按钮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;
}

我知道我使用的是旧版本的 waypoints，因为我知道现在已为 this.destroy() 删除了 triggerOnce。我已经尝试进行更新，但这是我没有做的项目的一部分，而且我无论如何都不是 jQuery wiz。因此，如果有人对如何更新代码以使用销毁有建议，请不要犹豫给我业务。

Waypoints 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动画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
}

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

干杯！

Answer 1

以下不是完美的答案。您必须获得适合您需求的概念。动画再次触发的原因是 CSS 默认情况下是这样工作的。您可以使用 JS 修复该问题（检查 similar question/answer here。）

整个想法是添加 in_from_left class 但在动画完成后也将其删除。这样它就不会在你 "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

Waypoints - 动画触发两次

Waypoints - Animation firing twice

jquery

animation

css-animations

jquery-waypoints

Here's a demo