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

【问题标题】：How to set css3 animation inline or by javascript?如何内联或通过javascript设置css3动画？
【发布时间】：2015-02-12 23:51:33
【问题描述】：

我想将css3动画效果设置为多元素，但动画位置与元素数量有关，不确定。我必须通过 js 设置 css 样式（可能是 mvvm 框架）。

示例代码：

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

我发现无法通过 data-* 设置 css 属性，也无法添加定义内联的内联 css3 动画。有人知道用 css 或 mvvm 方式解决这个问题吗？

【问题讨论】：

标签： javascript css mvvm css-animations keyframe

【解决方案1】：

两种选择：

如果可能的结束位置的数量很少和/或预先知道，您可以编写许多不同名称的关键帧定义变体（position10、position20 等）。
如果这不是一个选项，请考虑使用 jQuery 设置元素的位置，这样您就可以进行所需的所有计算，并且动画持续时间仅依赖 CSS。 Here's a fiddle 展示了如何实现这一目标：

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

希望这会有所帮助！

【讨论】：

数量最多12个，1-4个方向导致近30种变化，列出所有可能的动画并不是一个好的决定。 jQuery 是一种选择，但我宁愿使用原始 DOM 选项。我想要一些我认为更优雅的 css 解决方案或 mvvm 友好的解决方案。