如何使用 anime.js 动画 zIndex 过渡？

Question

我正在尝试使用 anime.js:

进行 zIndex 转换

我有一个 div 应用了以下 css 规则：

div {
  background: #1CE2B2;
  height: 50px;
  width: 50px;
  z-index: 1;
}

我想为 div:

的 zIndex 过渡设置动画

$(document).click(() => {
  var keyframes = anime({
    targets: 'div',
    zIndex: [
      { value: '50', duration: 500, },
      { value: '100', duration: 500, },
      { value: '150', duration: 500, },
    ],
  });
})

但是 zIndex 从 1 变为 150，没有中间值 50 和 100。我错过了什么？

velocity.js 或 jQuery 可以吗？

~~这是一支笔：https://codepen.io/evgeny_t/pen/BRNKZe~~

如何在 github 上填写：https://github.com/juliangarnier/anime/issues/156

UPD

上面的代码应该改为：

$(document).click(() => {
  var keyframes = anime({
    targets: 'div',
    zIndex: [
      { value: '50', duration: 500, round:true },
      { value: '100', duration: 500, round:true },
      { value: '150', duration: 500, round:true },
    ],
  });
})

Answer 1

z-index 属性不接受小数，所以直接跳到 5。尝试四舍五入该值，如下所示：

anime({
  targets: '.box',
  rotate: [45, 45],
  scale: [0, 5],
  zIndex: {
    value: [1, 5],
    round: true
  },
  loop: true,
  duration: 10000,
});

如何使用 anime.js 动画 zIndex 过渡？

How to animate zIndex transition with anime.js?

javascript

css

jquery

velocity.js