如何用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-索引属性不接受小数，这就是它直接跳转到5的原因。 尝试舍入数值，如下所示：

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