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