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

Question

如果有人能让这个简单的例子起作用，我将不胜感激！

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

当我单击一个按钮时，时钟从时间 = 0 开始计时。

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

完成所有这些后，"cat" 正常显示，就好像直接输入 HTML 一样。

Answer 1

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

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

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

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

Answer 2

如果不进行一些额外的清理，我可能不会使用它，但这段代码有效。

写的很开心。应该能满足你的要求。

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 class 覆盖 style 的 opacity 的快速简单方法属性。

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

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

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

How to time mutliple CSS events simultaneously?

javascript

jquery

html

css-transitions

timing