javascript - 如何使用anime.js为z索引过渡设置动画？

我正在尝试使用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 },
    ],
  });
})

最佳答案

z-index属性不接受小数，这就是为什么它会直接跳到5。
尝试舍入该值，如下所示：

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

关于javascript - 如何使用anime.js为z索引过渡设置动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43436231/