Fatal编程技术网
  • javascript/
  • Javascript 在CSS3中重新启动动画：有没有比删除元素更好的方法？

Javascript 在CSS3中重新启动动画：有没有比删除元素更好的方法？

javascript css

Javascript 在CSS3中重新启动动画：有没有比删除元素更好的方法？,javascript,css,Javascript,Css,我有一个CSS3动画，需要在单击后重新启动。这是一个显示还剩多少时间的酒吧。我正在使用scaleY（0）变换来创建效果 现在，我需要通过将该条恢复到scaleY（1）并让它再次转到scaleY（0）来重新启动动画。 我第一次尝试设置scaleY（1）失败，因为它需要同样的15秒才能恢复到完整长度。即使我将持续时间更改为0.1秒，我也需要延迟或链接scaleY（0）的分配，以便完成条补充。 对于这样一项简单的任务来说，感觉太复杂了 我还发现了一个有趣的提示，可以通过从文档中删除元素，然后重新插入其

我有一个CSS3动画，需要在单击后重新启动。这是一个显示还剩多少时间的酒吧。我正在使用scaleY（0）变换来创建效果

现在，我需要通过将该条恢复到scaleY（1）并让它再次转到scaleY（0）来重新启动动画。 我第一次尝试设置scaleY（1）失败，因为它需要同样的15秒才能恢复到完整长度。即使我将持续时间更改为0.1秒，我也需要延迟或链接scaleY（0）的分配，以便完成条补充。 对于这样一项简单的任务来说，感觉太复杂了

我还发现了一个有趣的提示，可以通过从文档中删除元素，然后重新插入其克隆来重新启动动画：

它可以工作，但是有没有更好的方法来重新启动CSS动画？
我正在使用Prototype和，但我并不局限于它们。

只需通过JavaScript将
动画
属性设置为
“none”
，然后设置一个超时，将属性更改为
”
，这样它就可以再次从CSS继承

Webkit演示如下：
但是，请记住，在实际使用中，还应包括-moz-（至少）。

在此页面上，您可以阅读有关重新启动元素动画的内容： 以下是我的例子：

 <head>
        <style>
            @keyframes selectss
{
    0%{opacity: 0.7;transform:scale(1);} 
    100%{transform:scale(2);opacity: 0;}
}
        </style>
        <script>
            function animation()
            {
                var elm = document.getElementById('circle');
                elm.style.animation='selectss 2s ease-out';
                var newone = elm.cloneNode(true);
                elm.parentNode.replaceChild(newone, elm);
            }
        </script>
    </head>
    <body>
        <div id="circle" style="height: 280px;width: 280px;opacity: 0;background-color: aqua;border-radius: 500px;"></div>
        <button onclick="animation()"></button>
    </body>
希望我能帮忙

例如，如果您有css3动画类。闪烁，则您可以删除某些元素的类，并添加该元素的类，单击设置超时时间为1毫秒

  $("#element").click(function(){
     $(this).removeClass("blink");

     setTimeout(function(){
       $(this).addClass("blink);
    },1 ///it may be only 1 milisecond, it's enough
  });
无需超时，用于应用更改：

函数重置\u动画（）{
var el=document.getElementById（'animated'）；
el.style.animation='none'；
el.offsetHeight；/*触发回流焊*/
el.style.animation=null；
}
#动画{
位置：绝对位置；
宽度：50px；高度：50px；
背景色：黑色；
动画：弹跳3秒轻松进出无限；
}
@关键帧反弹{
0%{左：0；}
50%{左：计算（100%-50px）；}
100%{左：0；}
}

重置
创建第二个“关键帧@”，重新启动动画，唯一的问题是您无法为重新启动的动画设置任何动画属性（它只是有点弹回来）

-----HTML-----

  • 将动画实现为CSS描述符
  • 将描述符添加到元素以开始动画
  • 使用
    animationend
    事件处理程序函数在动画完成时删除描述符，以便下次要重新启动动画时可以再次添加描述符 ---HTML---

    请在此处尝试：

    关于MDN有一个答案，与回流焊方法类似：

    <div class="box">
</div>

<div class="runButton">Click me to run the animation</div>

    您也可以使用“显示”属性，只需将“显示”设置为“无”

    display:none;
    更改会将其返回到block（或任何其他您想要的属性）

    使用JavaScript

    这款动画API可以让你完全控制播放的时间和内容，并且受到所有现代浏览器的支持（Safari 12.1+、Chrome 44+、Firefox 48+、Edge 79+）

    演示：

    参考资料：

    @ZachB对Web动画API的回答似乎是“正确的”™ 这样做的方法，但不幸的是，似乎需要您通过JavaScript定义动画。然而，它吸引了我的眼球，我发现了一些相关的有用的东西：

    及

    截至2021年，对它们的支持相当不错

    在我的例子中，我想同时重新启动页面上的所有动画，所以我所要做的就是：

    const replayAnimations=（）=>{
document.getAnimations（）.forEach（（动画）=>{
动画完成（）；
动画。游戏（）；
});
};
    但在大多数情况下，人们可能希望选择他们重新启动的动画

    getAnimations
    返回一组如下所示的
    CSSAnimation
    和
    cstranslation
    对象：

    animationName:“淡入淡出”
当前时间：1500
效果：关键帧效果
复合：“替换”
伪元素：null
目标：path.line.yellow
完成：承诺{:CSSAnimation}
游戏状态：“完成”
准备好：承诺{:CSSAnimation}
替换状态：“活动”
时间线：DocumentTimeline{currentTime:135640.502}
#…等等
    因此，您可以使用
    animationName
    和
    target
    属性来选择所需的动画（尽管有点迂回）。

    谢谢。差不多了：），如果我将你的动画更改为只运行一次，我不会得到相同的效果。当我单击时，动画不会重新开始。谢谢Lea，我认为这比替换元素Hanks效果更好但不幸的是，我不能让它在Safari中工作。Chrome、Edge和Firefox正在按预期工作。我使用以下代码：
    var anim=jQuery（mutation.target）。查找（“.background.background image:first”）。获取（0）；anim.style.WebkitAnimation='none'；anim.style.animation='none'；setTimeout（函数（）{anim.style.WebkitAnimation=''；anim.style.animation=''；}，10）；}现在是2019年，因为这应该不再需要了。为了避免@Eric描述的超时问题，您可以调用
    void element.offsetWidth
    在动画属性更改之间强制回流，而不是使用超时。您可以在更新的博客文章中阅读其他强制回流元素的技术：
    element.offsetWidth=element.offsetWidthe.style.animation='none'；e、 远视；e、 style.animation=或者，如果您使用的是类：
    e.classList.remove（'a'）；e、 远视；e、 类列表。添加（'a'）
    您还可以通过调用其中任何一个来触发回流，而不仅仅是
    offsetHeight.slide {
    position: relative;
    border: 3px black inset;
    padding: 3px;
    width: auto;
    overflow: hidden;
}
.slide div:first-child {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(wood.jpg) repeat-x;
    left: 0%;
    top: 0%;            
    animation-duration: 2s;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.33,.99,1,1); 
}

@keyframes slider {
    to {left: 100%;}
}

@keyframes slider-restart {
    to {left: 0%;}
}

    

    <div id="animatedText">
Animation happens here
</div>

<script>

  function startanimation(element) {

    element.classList.add("animateDescriptor");

    element.addEventListener( "animationend",  function() {

      element.classList.remove("animateDescriptor");    

    } );

  }

</script>


<button onclick="startanimation( document.getElementById('animatedText') )">
Click to animate above text
</button>

    

    @keyframes fadeinout {  
      from { color: #000000; }  
    25% {color: #0000FF; }  
    50% {color: #00FF00; }      
    75% {color: #FF0000; }  
      to { color : #000000; }   
  } 

  .animateDescriptor {  
    animation: fadeinout 1.0s;  
  }     

    

    <div class="box">
</div>

<div class="runButton">Click me to run the animation</div>

    

    @keyframes colorchange {
  0% { background: yellow }
  100% { background: blue }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}

    

    function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}

    

    display:none;

    

    display:block;

    

    const effect = new KeyframeEffect(
  el, // Element to animate
  [ // Keyframes
    {transform: "translateY(0%)"}, 
    {transform: "translateY(100%)"}
  ], 
  {duration: 3000, direction: "alternate", easing: "linear"} // Keyframe settings
);

const animation = new Animation(effect, document.timeline);

animation.play();