如何使用anime.js 为zIndex 过渡设置动画？答案

【问题标题】：How to animate zIndex transition with anime.js?如何使用anime.js 为zIndex 过渡设置动画？
【发布时间】：2021-01-27 17:26:03
【问题描述】：

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

【问题讨论】：

如果不赞成请评论

标签： javascript jquery css velocity.js

【解决方案1】：

z-index 属性不接受小数，这就是它直接跳转到 5 的原因。尝试将值四舍五入，如下所示：

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

【讨论】：