我试图在动画运行时添加一个类,然后在运行后删除它。动画是无限的。
addClass
animationiteration
removeClass
zi8p0yeb1#
你不能跟随Javascript中的CSS动画循环。但是你可以使用一个计时器来伪造它。因为你的动画循环需要6秒,你可以使用一个6秒长的超时来在循环结束时停止动画。为了防止开头和结尾处闪烁,还需要一些额外的东西:1.同时在长方体上设置初始变换1.超时后,添加一个新的类,它具有最后一个关键帧的变换。具体操作如下:第一个
qxsslcnc2#
我认为您必须从animation属性中删除infinite,并忘记onanimationiteration,因为这似乎不是您想要的。
infinite
onanimationiteration
<style> .box { width: 100px; height: 100px; background: #000; } .animate { animation: animation 6s; } @keyframes animation { 0% { transform: scale(.3); } 50% { transform: scale(.6) rotate(-45deg); background: red; } 100% { transform: scale(1) rotate(180deg); background: blue; } } </style> <div class="box"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var $box = $('.box'); $box.addClass('animate'); $box.on('animationend', function() { $box.removeClass('animate'); }); </script>
如果没有jQuery,它将类似于:
<style> .box { width: 100px; height: 100px; background: #000; } .animate { animation: animation 6s; } @keyframes animation { 0% { transform: scale(.3); } 50% { transform: scale(.6) rotate(-45deg); background: red; } 100% { transform: scale(1) rotate(180deg); background: blue; } } </style> <div class="box"></div> <script> const box = document.querySelector('.box'); box.classList.add('animate'); box.addEventListener('onanimationend', function() { box.classList.remove('animate'); }); </script>
你可以在mdn上查看更多关于这方面的信息。https://developer.mozilla.org/en-US/docs/Web/CSS/animationhttps://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
2条答案
按热度按时间zi8p0yeb1#
你不能跟随Javascript中的CSS动画循环。但是你可以使用一个计时器来伪造它。因为你的动画循环需要6秒,你可以使用一个6秒长的超时来在循环结束时停止动画。
为了防止开头和结尾处闪烁,还需要一些额外的东西:
1.同时在长方体上设置初始变换
1.超时后,添加一个新的类,它具有最后一个关键帧的变换。
具体操作如下:
第一个
qxsslcnc2#
我认为您必须从animation属性中删除
infinite
,并忘记onanimationiteration
,因为这似乎不是您想要的。如果没有jQuery,它将类似于:
你可以在mdn上查看更多关于这方面的信息。
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent