Fatal编程技术网
  • javascript/
  • @keyframes动画结束后，javascript无法操纵css值

@keyframes动画结束后，javascript无法操纵css值

javascript jquery html css animation

@keyframes动画结束后，javascript无法操纵css值,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,关键帧代码如下： #animate{ width:100px; height:100px; border:solid 1px #ccc; position:absolute; } @keyframes slideMiddle{ 0%{ left:20px; } 100%{ left:40px; } } .animate{slideMiddle,1s,both}

关键帧代码如下：

#animate{
        width:100px;
        height:100px;
        border:solid 1px #ccc;
        position:absolute;
    }
@keyframes slideMiddle{
    0%{
        left:20px;
    }
    100%{
        left:40px;
    }
}
.animate{slideMiddle,1s,both}
然后我通过JavaScript将类
animate
添加到元素
ele
，它的工作方式与我预期的一样，但在动画完成后，我使用JavaScript设置
ele.style.left=“80px”
，什么也没有发生，ele的位置与之前相同

然后我将类
animate
修改为
.animate{slideMiddle，1s}
，并将
.animate
添加到ele，在动画完成后，当我设置
ele.style.left=“80px”
时，它起作用

所以我的问题是：
动画填充模式：两者都有防止JavaScript操纵在关键帧中设置动画的css属性

更新，以下是我的代码：

HTML


我在chrome中打开devtool来观察
中的任何变化，大约5秒后，
ele
确实将inline
left
值更改为
80px
，但它在页面中的位置没有变化，这很奇怪。我错过什么了吗
 您确定要在动画完成后应用javascript吗？请出示您的JS代码。请提供您的完整信息code@Alex，@DCdaz抱歉这么晚才回复，我已经更新了我的问题：）你确定在动画完成后应用javascript吗？请出示您的JS代码。请提供您的完整信息code@Alex，@DCdaz抱歉这么晚才回复，我已经更新了我的问题：）

<div id='animate'></div>



var ele=document.getElementById('animate');
ele.classList.add('animate');
setTimeout(function(){
   ele.style.left='80px';
},5000);