使用 JS 動畫文本內容

Question

以下代碼使div 的文本內容在向下滑動時消失。 我怎樣才能在它還在滑動的時候從上面替換它的內容？ 我的代碼在沒有替換新內容的情況下這樣做，我只是不知道為什么？ 我的目標和想法不僅僅是替換文本內容，而是在 animation 過程中這樣做。

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,
        
      });
}

Answer 1

您可以在第一個 animation 完成后立即開始另一個 animation。 但在開始第二個 animation 之前，您可以更改文本。

 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>

Answer 2

請忽略“類型”、“格式編號”。 它們與我的問題無關。

var changeText = function(id, text, type){
    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)', opacity: '0.3' }
        
      ], { 
        // timing options
        duration: 400,
        
      });

      window.setTimeout(()=>{
        item.style.display = "none";
        document.querySelector(id).textContent = formatNumber(text, type);
        item.style.display = "block";
        item.animate([
            // keyframes
            { transform: 'translateY(-20px)', opacity: '0' },
            { transform: 'translateY(-14px)', opacity: '0.3' },
            { transform: 'translateY(-9px)',  opacity: '0.5' },
            { transform: 'translateY(-4px)', opacity: '0.7'},   
            { transform: 'translateY(1-1px)', opacity: '0.9' },
            { transform: 'translateY(0px)', opacity: '1' }
            
          ], { 
            // timing options
            duration: 400,
            
          });
    }, 400);