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

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 来实现动画持续时间。 Here's a fiddle展示如何实现这一目标:

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

希望这对您有所帮助!