Javascript获取元素CSS过渡阶段
Javascript Get Element CSS Transition Stage
是否可以使用Javascript获取对象在CSS转换的哪个阶段,而不使用间隔或依赖于开始时间戳?我知道转换可以串在一起,但如果可以的话,我宁愿避免这种情况。
例如,对于一个经历以下转换的div:
@keyframes example {
0% {background: red;}
50% {background: blue;}
100% {background: yellow;}
}
是否可以确定div是否在0%和50%之间?请使用纯Javascript。
您可以在动画中指定一个属性并检索该属性值以了解动画阶段。例如,asign z索引的值在100和200之间:
单击元素以显示动画的百分比
function showStep () {
var ele = document.getElementById("test");
var step = getComputedStyle(ele).getPropertyValue("z-index") - 100;
ele.innerText = step;
}
#test {
position: absolute;
width: 400px;
height: 200px;
border: solid red 1px;
-webkit-animation: colors 4s infinite;
animation: colors 6s infinite;
font-size: 80px;
color: white;
}
@-webkit-keyframes colors {
0% {background: red; z-index: 100;}
50% {background: blue; z-index: 150;}
100% {background: yellow; z-index: 200;}
}
@keyframes colors {
0% {background: red; z-index: 100;}
50% {background: blue; z-index: 150;}
100% {background: yellow; z-index: 200;}
}
<div id="test" onclick="showStep();">
</div>
相关文章:
- 获取HTML属性中CSS声明的值
- 在jquery中使用css获取背景值
- 使用javascript和css选择器获取value属性的内容
- 使用javascript获取具有特定CSS属性的所有元素
- 快递.js无法获取我的 CSS 文件
- 如何通过chrome扩展名获取所有CSS和Javascript文件
- 使用纯 Js 或 jquery 获取相同的 64 个类的 CSS 属性值
- 从类(动态)中获取css属性并将其添加到另一个类中
- 如何在样式元素中获取 CSS 代码
- 获取脚本中CSS颜色属性的实际值
- 使用regex从css文件中获取所有类(以文本形式)
- 如何使用javascript获取元素的css选择器
- 如何从CSS中获取颜色的值
- Javascript获取元素CSS过渡阶段
- 如何在 Javascript 中获取 CSS 类属性
- 以非像素为单位获取HTML DOM元素的CSS高度,在我的例子中是英寸
- 如何使用jquery从类中获取css属性
- Javascript正则表达式,用于从Css获取所有媒体查询
- CSS获取父元素属性
- jQuery /CSS -获取相对元素的位置,相应位置的工具提示