小编mar*_*are的帖子

Anime.js如何反转此动画?

我最近开始使用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;
Run Code Online (Sandbox Code Playgroud)
.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

javascript animation reverse anime.js

2
推荐指数
1
解决办法
3921
查看次数

标签 统计

animation ×1

anime.js ×1

javascript ×1

reverse ×1