我想将css3动画效果设置为多元素,但动画位置与元素数量有关,这是不确定的。我不得不通过js(可能是mvvm框架)设置css样式。
示例代码:
@-webkit-keyframes position {
0% {left:0}
100% {left: 5*elementCounts px;}
}
我发现没有办法通过data-*设置css属性,也没有办法添加内联css3动画定义内联。有人想用css或mvvm的方式解决这个问题吗?
两个选项:
-
如果可能的结束位置数量较少和/或事先已知,则可以使用不同的名称(
position10
、position20
等)编写多个关键帧定义变体。 -
如果这不是一个选项,请考虑使用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;
}
希望这能有所帮助!