如何设置css3动画内联或通过javascript？

Question

I'd like to set css3 animation effect to multi element, but the animated position was related to the count of elements which is not certain. I had to set css style by js (maybe a mvvm framework).

sample code:

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

I found there's no way to set css property by data-*, neither to add inline css3 animation defining inline. Anybody have idea to resolve this in css or mvvm way?

Answer 1

Two options:

1. If the number of possible ending positions is small and/or known in advance, you could write a number of variants of your keyframe definition with different names ( position10 , position20 , etc).

2. If that is not an option, consider setting the element's position with jQuery so you can do all the calculations you need, and only relying on CSS for the animation duration. Here's a fiddle showing how you can achieve that:

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;
}

Hope this helps!