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

How to set css3 animation inline or by javascript?

本文关键字：设置 css3 动画 javascript 何内联      更新时间：2023-09-26

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

示例代码：

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

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

两个选项：

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

希望这能有所帮助！

相关文章：