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

Question

我正在创建一个投资组合网站。我希望背景是文本自动更改为'HTML'到'CSS'到'JavaScript'。但是，我也希望它们能够改变，而不是简单地改变，但是在动画中，如animation.css中的zoomIn和zoomOut。换句话说，当文本“HTML”在更改为CSS之前消失时，它会变得更小，直到您无法再看到并再次显示为“CSS”。对不起，请注意并发症。

目前，我通过在单词数组上实现setInterval来改变加班时间。

的index.html

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

main.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类id，然后交替删除每一步。

时间间隔除以2以保持与以前相同的速率。

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>

Answer 2

您还可以添加比您的间隔长3倍的CSS动画。

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

#change {
  text-align: center;
  animation: 6s colors infinite;
}

@keyframes colors {
  16.66%,
  50%,
  56%,
  83.31% {
    color: tomato;
    font-size: 3rem;
  }
  0%,
  33.33%,
  66.65%,
  100% {
    color: lightblue;
    font-size: 2rem;
  }
}

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

在动画内部，您可以使用transform来避免内容跳跃