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过渡？

1 个答案: