javascript - 如何使用 anime.js 为 zIndex 转换设置动画？

Question

我正在尝试使用 anime.js 进行 zIndex 转换:

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

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,
});