javascript - 如何使用 setInterval 和 CSS 样式更改文本动画？

Question

我正在制作一个投资组合网站。我希望背景是自动更改的文本，例如“HTML”到“CSS”到“JavaScript”。然而，我也希望他们改变，不是简单的，而是在动画中，比如 animation.css 中的 zoomIn 和 zoomOut。换句话说，当文本“HTML”在更改为 CSS 之前消失时，它会变小直到您看不到并再次出现越来越大到“CSS”。抱歉造成并发症。

目前，我通过对单词数组实现 setInterval 来超时更改文本。

index.html

<h1 id="change"></h1>

主要.js

const symbols = ['HTML', 'CSS', 'JavaScript']
count = 0
let inthandle = setInterval(() => {
  document.getElementById("change").innerHTML = symbols[count];
  count = (count + 1) % symbols.length
}, 2000)

Answer 1

您可以通过将 scale transform 更改两次来实现此缩小过渡。对于符号中的每个元素。

注意过渡时间必须是setInterval周期的一半。

count 需要增加 2 才能更改文本，但是 .out class id 添加然后在每个步骤中交替删除。

时间间隔已除以二以保持与之前相同的速率。

h1 元素还必须保持固定大小和文本居中，以产生相同文本变化的错觉。

最后强制调用一次迭代回调以立即开始动画。

const symbols = ['HTML', 'CSS', 'JavaScript'];
let count = 0;
const element = document.getElementById("change");
const iteration = () => {
  element.innerHTML = symbols[parseInt(count / 2, 10) % symbols.length];
  if (count % 2 !== 0) {
    element.classList.add("out");
  } else {
    element.classList.remove("out");
  }
  count++;
  // if you're affraid the code could run for so long that it could fail,
  // 6 is enough (number of elems * 2)
  if (count === symbols.length * 2) {
      count = 0;
  }
};
let inthandle = setInterval(iteration, 1000);
iteration();

#change {
transition: transform 0.5s;
display: inline-block;
width: 200px;
text-align: center;
}


.out {
  transform: scale(0);
}

<h1 id="change">HTML</h1>