Anime.js как отменить эту анимацию?

maria di cesare спросил: 28 апреля 2018 в 08:22 в: javascript

Недавно я начал работать с Anime.js, чтобы оживить мои проекты, и я застрял в этом какое-то время, ставка для многих это очень просто! У меня есть кнопка, которая увеличивает мой div и хотела бы иметь div в своем начальном состоянии, если значок снова щелкнут. Мой HTML:

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false

});


document.querySelector('.agent-button').onclick = boxGetsLarger.play;

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

2 ответа

Andrew Bone ответил: 28 апреля 2018 в 09:33

Стыдно, что нет встроенной функции переключения, но есть обратная функция, что делает это, чтобы переключить внутренний атрибут reversed, который, в свою очередь, управляет тем, что play функция действительно.

В теории вы можете просто вызвать reverse после play, как это сделать

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false
});

document.querySelector('.agent-button').onclick = function() {
  boxGetsLarger.play();
  boxGetsLarger.reverse();
}
.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

Только я обнаружил, что reverse работает до завершения play, что приводит к какое-то странное поведение, я бы рекомендовал использовать "законченное" обещание, встроенное таким образом.

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false
});

document.querySelector('.agent-button').onclick = function() {
  boxGetsLarger.play();
  boxGetsLarger.finished.then(() => {
    boxGetsLarger.reverse();
  })
}
.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

Теперь это изменит направление, когда play будет завершено.

Я надеюсь, что вы найдете это полезным.

Yotam Omer ответил: 28 апреля 2018 в 08:51

Попробуйте: (из документов)

boxGetsLarger.reverse();
Andrew Bone ответил: 28 апреля 2018 в 09:02
Вы могли бы подумать, что будет функция переключения?
maria di cesare ответил: 28 апреля 2018 в 09:40
Спасибо! уже пытался, но он конфликтует с другой функцией, той, которая открывает div