快速鼠标悬停鼠标悬停动画错误答案

【问题标题】：animation bug on quick mouseover mouseout快速鼠标悬停鼠标悬停动画错误
【发布时间】：2021-01-01 21:04:00
【问题描述】：

当我快速将鼠标悬停/鼠标移出元素时，有什么方法可以修复动画错误？

这是网站的实时版本 - https://daphne-rebuild.netlify.app/

当我快速在圆圈上悬停时，它会变得有问题。一直在发生，所以我真的希望有某种解决方法。

<div class="hover-circle" @mouseover="hoverCircle" @mouseout="leaveCircle">
      <div class="circle"></div>
      <span>Enter</span>
    </div>

hoverCircle(e) {
      gsap.to(".hover-circle .circle", {
        duration: 1,
        scale: 1.3,
        ease: "power4.out"
      });
      gsap.to(`.home-${this.currentComponent}`, {
        delay: 0.1,
        duration: 1,
        scale: 1.05,
        ease: "power4.out"
      });
    },
    leaveCircle() {
      gsap.to(".hover-circle .circle", {
        duration: 0.5,
        scale: 1,
        ease: "power4.inOut"
      });
      gsap.to(`.home-${this.currentComponent}`, {
        duration: 0.5,
        scale: 1,
        ease: "power4.inOut"
      });
    },

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

问题是您在hoverCircle 上放置了delay。如果hoverCircle 和leaveCircle 发生在小于0.1s 的范围内，则来自hoverCircle 的延迟动画实际上将在来自leaveCircle 的动画之后执行。删除delay 可能会解决问题。

我无法从您发布的代码中确定，但您可能还想停止当前在您的元素上播放的任何动画（进入和离开时）。为此，请使用...

gsap.killTweensOf(target)

...，记录在 here。在您的示例中，它可能看起来像：

hoverCircle() {
  gsap.killTweensOf(".hover-circle .circle");
  gsap.to(".hover-circle .circle", {
    duration: 1,
    scale: 1.3,
    ease: "power4.out"
  });
  gsap.killTweensOf(`.home-${this.currentComponent}`);
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 1,
    scale: 1.05,
    ease: "power4.out"
  });
},
leaveCircle() {
  gsap.killTweensOf(".hover-circle .circle");
  gsap.to(".hover-circle .circle", {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
  gsap.killTweensOf(`.home-${this.currentComponent}`);
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
}

如果你在多个地方有这个，你可能想重构一个名为stopAnimations的method：

hoverCircle() {
  this.stopAnimations();
  gsap.to(".hover-circle .circle", {
    duration: 1,
    scale: 1.3,
    ease: "power4.out"
  });
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 1,
    scale: 1.05,
    ease: "power4.out"
  });
},
leaveCircle() {
  this.stopAnimations();
  gsap.to(".hover-circle .circle", {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
},
stopAnimations() {
  gsap.killTweensOf(".hover-circle .circle");
  gsap.killTweensOf(`.home-${this.currentComponent}`);
}

【讨论】：