javascript - 动画期间触发更新

Question

我正在使用以下 CSS 代码为一个 div (id="ani") 设置动画。

#ani {
        width: 100px;
        height: 100px;
        background: red;
        color:white;
        position :relative;
        animation: mymove 5s infinite;
    }
 @keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 250px;}
    50%   {left:500px;}
    75%  {left: 250px}
    100% {left: 0px;}
}

我想知道是否有一种方法可以显示 CSS“left”属性的瞬时值，因为它正在改变，即“left”的值应该一直显示在屏幕上。有没有办法绑定(bind)“左”值说任何文本字段？ AngularJS 似乎不适用于样式表。

Answer 1

您可以使用类似 DEMO 的东西

$(function(){
    var div = $('#ani'),
        showLeft = $('#left');  

    setInterval(function () {
       showLeft.text(div.position().left)
     }, 10);
});