跨动态加载的元素进行连续动画 [英] Continuous animation across dynamically loaded elements

问题描述

我需要一个连续运行的CSS @keyframe动画 cross 元素，这些元素通过ajax / fetch动态添加，销毁和替换。

但是将动画绑定到动态添加的元素会使动画在每次替换元素时从0％重新开始。

部分解决方案是将动画绑定到不可变的父级元件。动画将连续运行并影响所有子元素，即使它们已被动态替换。

但是此解决方案的局限性在于我无法选择哪个子元素继承哪些动画。

这段代码：

HTML

 < div class ='parent '> 
< div class ='child one'>某些文本< / div> 
< div class =两个孩子>其他文字< / div> 
< / div> 
  

CSS（SASS）

  .parent 
动画：BY 15s无限替代
 
 .child.two 
动画：RG 15s无限替代
 
 @关键帧BY 
 0％
颜色：蓝色
 100％
颜色：黄色
 
 @keyframes RG 
 0％
颜色：红色
 100％
颜色：绿色
  

仅'影响 .child.one文本的 .parent在所有动态替换 .child.one时都保持连续。每次动态替换'.child.two'动画时，动画都会以0％重新开始。

这是一个代码笔，说明了这种行为： https://codepen.io/plagasul/pen/WNerBvO

我希望'.child.one'和'.child.two'具有不同的动画，这些动画在动态替换这些元素时都是连续的。

谢谢您

解决方案

这似乎是一个问题，仅靠CSS可能无法解决。如果我正确理解，您希望由另一个孩子替换的孩子的动画从上一个动画结束的地方开始。

您可以查看一下 Web动画API 。到目前为止，浏览器支持尚不完善，但将来可能会更好。 / p>

但是，它确实具有您所需要的功能。如有关MDN的文章所述，通过使用动画的currentTime 属性。

  //就像CSS一样，我们使用关键帧来创建动画。 
 const关键帧= [
 {
颜色：蓝色 
}，
 {
颜色：黄色 
} 
]; 
 
 //设置动画的定时属性，就像在CSS中一样。 
 const计时= {
持续时间：15000，
方向：替代，
迭代：无穷大，
}； 
 
 //并将它们加在一起。 
 const currentAnimation = document.querySelector（’。child’）。animate（关键帧，时间）； 
  

此处的代码与CSS动画的JavaScript等效。只要元素存在， .child 类的颜色就会更改，就像CSS中一样。

在用新的孩子替换孩子之前，您需要了解动画在时间上的位置。如前所述，通过访问 currentTime 属性来获取它。

  //返回动画的时间位置（以毫秒为单位）。 
 const position = currentAnimation.currentTime; 
  

所以现在您有了动画的位置。您可以使用它在新元素上设置动画的起点。就像这样：

  ///创建一个新动画
 const newAnimation = docum ... //您知道钻头。 
 
 //用上一个动画的位置更新currentTime。 
 newAnimation.currentTime =位置； 
  

新动画将从我们存储的位置开始。

您仍然需要将这些示例包装到函数中，以便在代码中使用它们，但我希望您能弄清楚。如果您不能使用Web动画API，则寻找具有更好支持的框架，例如 GreenSock 或 AnimeJS 。 本文也列出了一些不错的选择。

希望这对您有所帮助，并祝您有美好的一天！

I need to have a continuously running CSS @keyframe animation across elements that are dynamically added, destroyed and replaced via ajax/fetch.

But binding an animation to a dynamically added element makes the animation restart from 0% every time the element is replaced.

A partial solution is binding the animation to an unmutable parent element. The animation then will run continuously and affect any child elements, even if they are dynamically replaced.

But this solution is limited in that I cannot select which animations are inherited by which child element.

For this code:

HTML

<div class='parent'>
  <div class='child one'>Some text</div>
  <div class='child two'>Other text</div>
</div>

CSS (SASS)

.parent
  animation: BY 15s infinite alternate

.child.two
  animation: RG 15s infinite alternate

@keyframes BY
  0%
    color: blue
  100%
    color: yellow

@keyframes RG
  0%
    color: red
  100%
    color: green

Only the BY animation from '.parent' which affects '.child.one' text remains continous across any dynamic replacement of '.child.one'. While the animation of '.child.two' restarts at 0% every time it is dynamically replaced.

This is a codepen illustrating this behaviour: https://codepen.io/plagasul/pen/WNerBvO

I would like '.child.one' and '.child.two' to have different animations, that are both continuous across dynamic replacement of these elements.

Thank you

解决方案

This seems like a problem that might not be solvable with CSS alone. If I understand correctly you want the animation, of the child that is replaced by another child, to start at the point where it the previous animation ended.

You could look into the Web Animations API. As of this moment browser support is not great, but might get better in the future.

It does, however, have the capabilities that you are looking for. As referenced in this article on MDN, it is possible to get the point in time of your animation where it should start from by using the currentTime property of an animation.

// Just like with CSS we use keyframes to create an animation.
const keyframes = [
    { 
        color: 'blue' 
    },
    { 
        color: 'yellow' 
    }
];

// Set the timing properties of the animation just like you have in CSS.
const timing = {
    duration: 15000,
    direction: 'alternate',
    iterations: Infinity,
};

// And add it all together.
const currentAnimation = document.querySelector('.child').animate(keyframes, timing);

The code here is the JavaScript equivalent of CSS animations. The color of the .child class will change for as long as the element exists, just like in CSS.

Before you replace a child with a new one you'll want to know where the animation is in terms of time. Get it by accessing the currentTime property as mentioned before.

// Returns the position in time of the animation in milliseconds.
const position = currentAnimation.currentTime;

So now you have the position of the animation. You can use it to set the starting point of the animation on the new element. Just like this:

// Create a new animation
const newAnimation = docum... // You know the drill.

// Update the currentTime with the position of the previous animation.
newAnimation.currentTime = position;

The new animation will start on the position that we stored.

You still need to wrap these examples into functions to use them in your code, but I hope you can figure that out. If the Web Animations API is not something you could use then look for a framework with better support, like GreenSock or AnimeJS. This article also has a list of good alternatives.

Hope this helps and have a nice day!

这篇关于跨动态加载的元素进行连续动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！