Question

我使用animeJS在悬停时运行了一些简单的动画。在鼠标进入和鼠标离开时，我分别运行动画和非动画功能。尽管remove函数不会删除动画。我宁愿不必每次都仅向后和向前进行动画处理，而且我觉得这应该可行。这种动画效果很好，但是在鼠标离开时不会删除动画。

这是我当前的代码：

animate(id) {
anime({
  targets: ['#card-' + id],
  translateX: 10,
  translateY: 10,
  translateZ: 30,
  rotateX: 0,
  rotateY: -10,
  rotateZ: 0,
  duration: 200,
  easing: 'easeOutQuad'
});
anime({
  targets: ['#overlay-' + id],
  translateX: 10,
  translateY: -10,
  translateZ: 0,
  rotateX: 0,
  rotateY: 0,
  rotateZ: 2,
  duration: 2000,
  easing: 'easeOutExpo'
});
anime({
  targets: ['#border-' + id],
  translateX: 10,
  translateY: 10,
  translateZ: [0, 70],
  rotateX: 0,
  rotateY: 0,
  rotateZ: -2,
  duration: 2000,
  easing: 'easeOutExpo'
});
anime({
  targets: ['#shine-' + id],
  translateX: 100,
  translateY: 100,
  translateZ: 0,
  rotateX: 0,
  rotateY: 0,
  rotateZ: 0,
  duration: 2000,
  easing: 'easeOutQuad'
});
anime({
  targets: ['#caption-' + id],
  translateX: 0,
  translateY: 0,
  translateZ: -10,
  rotateX: 0,
  rotateY: 0,
  rotateZ: 0,
  duration: 200,
  easing: 'easeOutQuad'
});
 }

deanimate(id) {
    anime.remove('#card-' + id);
    anime.remove('#caption-' + id);
    anime.remove('#overlay-' + id);
    anime.remove('#border-' + id);
    anime.remove('#shine-' + id);
}

<div class="d-flex flex-wrap justify-content-center">
  <div id="card-1" class="card" (mouseenter)="animate(1)" (mouseleave)="deanimate(1)">
    <div id="overlay-1" class="overlay">
      <div id="border-1" class="card-border"></div>
      <div id="shine-1" class="card-shine">
        <div></div>
      </div>
      <div id="caption-1" class="card-caption">
        <h3 class="card-title">Brittani Harris</h3>
        <p class="card-description" [@slideInOut]>Maid of Honor</p>
      </div>
    </div>
  </div>
</div>

我有一张以上的卡片，我缩短了HTML并在此处排除了CSS，以节省一些空间。

使用AnimeJS删除动画

0 个答案: