Удалить анимацию с AnimeJS - PullRequest
Новая
       29

Удалить анимацию с AnimeJS

0 голосов
/ 18 декабря 2018

У меня есть простая анимация, запущенная при наведении курсора на animeJS.При вводе и отпускании мыши я запускаю функции animate и deanimate соответственно.Функция удаления не удаляет анимацию.Я бы предпочел не просто анимировать вперед и назад каждый раз, и у меня сложилось впечатление, что это должно сработать.Это прекрасно анимирует, но не удаляет анимацию при отпускании мыши.

Вот мой текущий код: 

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 здесь, чтобы сэкономить место.

...