javascript - 用 JS 动画文本内容

Question

以下代码使 div 的文本内容在向下滑动时消失。如何在它仍在滑动的同时从上面替换它的内容？我的代码在没有替换新内容的情况下这样做，我只是不知道为什么？我的目标和想法不仅仅是替换文本内容，而是在动画过程中这样做。

var changeText = function(id, newText){
    item = document.querySelector(id);

    item.animate([
        // keyframes
        { transform: 'translateY(0px)', opacity: '1' },
        { transform: 'translateY(1px)', opacity: '0.9' },
        { transform: 'translateY(4px)',  opacity: '0.7' },
        { transform: 'translateY(9px)', opacity: '0.5'},   
        { transform: 'translateY(14px)', opacity: '0.3' },
        { transform: 'translateY(20px)', content: newText}
        
      ], { 
        // timing options
        duration: 500,
        
      });
}

标签： javascriptcsscss-animations

Answer 1

您可以在第一个动画完成后立即开始另一个动画。但在开始第二个动画之前，您可以更改文本。

var changeText = function(id, newText){
    item = document.querySelector(id);
    
    // item.animate(...) returns an Animation (refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
    let animation = item.animate([
        // keyframes
        { transform: 'translateY(0px)', opacity: '1' },
        { transform: 'translateY(1px)', opacity: '0.9' },
        { transform: 'translateY(4px)',  opacity: '0.7' },
        { transform: 'translateY(9px)', opacity: '0.5'},   
        { transform: 'translateY(14px)', opacity: '0.3' }
        
      ], { 
        // timing options
        duration: 500,
        
      });
      
      /* The Animation has an eventHandler 
        refer to here: https://developer.mozilla.org/en-US/docs/Web/API/Animation
        and here: https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
      */
      animation.onfinish = function() {
        // change text 
        item.innerText = newText;
        // and start the second animation   
        item.animate([
        // keyframes
        { transform: 'translateY(14px)', opacity: '0.3' },
        { transform: 'translateY(9px)', opacity: '0.5' },
        { transform: 'translateY(4px)',  opacity: '0.7' },
        { transform: 'translateY(1px)', opacity: '0.9'},   
        { transform: 'translateY(0px)', opacity: '1' }
        
      ], { 
        // timing options
        duration: 500,
        
      });
      };
}

<button onClick="changeText('#txt', 'newTxt')">
Click me!
</button>
<div id="txt">
  Initial Text
</div>