如何同时计时多个 CSS 事件？

Question

如果有人能让这个简单的例子工作，我将非常感激！

var string = "cat";
var transitions = {0.3 , 0.2 , 0.6};
var timings = {0, 1.0, 1.5};

当我点击一个按钮时，时钟从 time = 0 开始。

• 在 t = 0 时，“c”开始出现。
• 在 t = 0.3 秒时，'c' 已完全出现。
• 在 t = 1.0 秒时，“a”开始出现。
• 在 t = 1.2 秒时，'c' 已完全出现。
• 在 t = 1.5 秒时，“t”开始出现。
• 在 t = 2.1 秒时，“t”已完全出现。

在这一切之后，“猫”正常显示，就好像它是直接输入到 HTML 中一样。

Answer 1

如果没有一些额外的清理，我可能不会使用它，但是这段代码可以工作。

写作很有趣。并且应该满足您的要求。

var transitions = [0.3 , 0.2 , 0.6];
var timings = [0, 1.0, 1.5];


function typeWrite(el, string) {
  return new Promise(
    function(resolve) {
      var i = 0;
      var l = string.length;
      
      function typeOne() {
        var chr = string[i];
        var span = document.createElement('span');
        span.innerHTML = chr;
        span.setAttribute('style', `transition: ${transitions[i]}s; opacity: 0;`); 
        el.appendChild(span);
        setTimeout(function() {span.className = 'typewriter-effect';},0);
        i++;
        if( i < l) {
          setTimeout(typeOne, timings[i]*1000);
        }
        else {
          resolve();
        }
      }
      
      typeOne();
    }
  )
}
      
typeWrite(document.querySelector('.typed-string'), 'cat').then(
  function() {
    console.log('Finished typing');
  }
);

.typewriter-effect {
  opacity: 1 !important;
}

<div class="typed-string"></div>

我通常讨厌使用!important，但这是一种快速简单的方法，可以让 CSS 类覆盖 style 属性的 opacity。

我正在做的是遍历字符串和您提供的两个数组，然后我为每个字母创建一个新的<span> 并将它们添加到 DOM 中。每个新的<span> 表示它们从opacity:0 淡入到opacity:1 需要多长时间。

然后我打电话给setTimeout 等待所需的时间，然后再写下一封信。这种模式一直持续到所有字母都完成渲染。然后例程解析承诺，以便调用代码知道编写例程何时完成。

Answer 2

您想在 CSS 动画中使用步骤以及关键帧（来自 tutorial）

.typewriter-effect {
    animation: 
        typing 3.5s steps(40, end)
}

/* The typing effect */
@keyframes typing {
   from { width: 0 }
   to { width: 100% }
}

它的工作方式是您的关键帧指定效果，steps 函数确定它分解成多少部分。