如何設置css3動畫內聯或通過javascript？

Question

我想將css3動畫效果設置為多元素，但是動畫位置與不確定的元素數量有關。 我必須通過js（可能是mvvm框架）設置CSS樣式。

樣例代碼：

@-webkit-keyframes position {
    0% {left:0}
    100% {left: 5*elementCounts px;}
}

我發現無法通過data- *設置css屬性，也無法添加定義內聯的內聯css3動畫。 有人有想法以CSS或mvvm的方式解決此問題嗎？

Answer 1

兩種選擇：

1. 如果可能的結束位置數量很少和/或事先已知，則可以使用不同的名稱（ position10 ， position20等）編寫關鍵幀定義的多個變體。

2. 如果不是這樣，請考慮使用jQuery設置元素的位置，以便您可以進行所有需要的計算，並且僅在動畫持續時間內依靠CSS。 這是顯示您如何實現的小提琴 ：

JS

$(document).ready(function() {
    // calculate the intended location
    var div1Position = 100*1;
    var div2Position = 100*2;

    $('#div1').animate({ left: div1Position });
    $('#div2').animate({ left: div2Position });
});

HTML

<div id="parent">
    <div id="div1" class="box">Test #1</div>
    <div id="div2" class="box">Test #2</div>
</div>

CSS

#parent {
    position: relative;
}

.box {
    background-color: grey;
    color: red;
    position: absolute;
    display: block;
    height: 75px;
    width: 75px;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

希望這可以幫助！