我在网页上有一个文本标题，它是按时间间隔顺序、动态和随机修改的。目前，我正在使用textContent方法更改文本中的每个单词，这导致了一个笨拙的动画。我想为每个单词/短语的更改在文本中添加一个淡入/淡出动画。我知道jQuery也可以做一些类似的事情，但我想看看它是否可以在纯JavaScript和CSS中完成，如果它可以添加到我现有的代码中的话。如果我必须改变我的整个方法(比如将所有文本放入HTML元素中，并使用CSS显示每个元素(，只要它有效，那也没问题。
这是我的密码。
// Text to replace elements in h1 with
const languages = [
['Bienvenidos', 'a', 'odio la escuela'],
['Willkomen', 'zu', 'ich hasse schule'],
['欢迎', '来到', '我讨厌上学']
]
// Shuffles the array of languages (occurs once the array has been iterated through entirely)
const shuffle = () => {
for (let i = languages.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = languages[i]
languages[i] = languages[j]
languages[j] = temp
}
}
// DOM elements to be modified
const welcomeTitle = document.getElementById('welcome-landing-header')
const toTitle = document.getElementById('to-landing-header')
const landingTitle = document.getElementById('landing-title')
// Function to modify the text
let languageIndex = 0
const changeHeading = () => {
/* Case where the language index has gone out of bounds of the array; reshuffle array and
reset text */
if (languageIndex === languages.length) {
languageIndex = 0
shuffle()
welcomeTitle.textContent = 'Welcome'
setTimeout(() => toTitle.textContent = 'to', 1000)
setTimeout(() => landingTitle.textContent = 'i hate school', 2000)
} else {
// Iterate through the random language selected, changing each DOM element sequentially
const language = languages[languageIndex]
welcomeTitle.textContent = language[0]
setTimeout(() => toTitle.textContent = language[1], 1000)
setTimeout(() => landingTitle.textContent = language[2], 2000)
languageIndex++
}
}
setInterval(changeHeading, 3000)<h1>
<span id="welcome-landing-header">Welcome</span>
<span id="to-landing-header">to</span>
<br>
<span id="landing-title">i hate school</span>
</h1>我只想为每个修改的span元素添加一个淡入/淡出动画，而不是像当前那样在没有任何动画的情况下更改文本。这很难，因为有三个交错的动画同时发生(一个是"欢迎"，一个是为"去"，还有一个是为了"我讨厌学校"(。如果有人能帮助我或提供更有效的解决方案，我将不胜感激！非常感谢。
您可以使用W3.CSS动画并添加一个新的js函数来创建您想要的内容。这样你的代码最终会看起来像以下几行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade {
animation: myanimation 1.5s;
}
@keyframes myanimation {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<h1>
<span id="welcome-landing-header" class="fade">Welcome</span>
<span id="to-landing-header" class="fade">to</span>
<br>
<span id="landing-title" class="fade">i hate school</span>
</h1>
<script>
// Text to replace elements in h1 with
const languages = [
['Bienvenidos', 'a', 'odio la escuela'],
['Willkomen', 'zu', 'ich hasse schule'],
['欢迎', '来到', '我讨厌上学']
]
// Shuffles the array of languages (occurs once the array has been iterated through entirely)
const shuffle = () => {
for (let i = languages.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = languages[i]
languages[i] = languages[j]
languages[j] = temp
}
}
// DOM elements to be modified
const welcomeTitle = document.getElementById('welcome-landing-header')
const toTitle = document.getElementById('to-landing-header')
const landingTitle = document.getElementById('landing-title')
// Function to modify the text
let languageIndex = 0
const changeHeading = () => {
/* Case where the language index has gone out of bounds of the array; reshuffle array and
reset text */
if (languageIndex === languages.length) {
languageIndex = 0
shuffle()
welcomeTitle.textContent = 'Welcome'
setTimeout(() => toTitle.textContent = 'to', 1000)
setTimeout(() => landingTitle.textContent = 'i hate school', 2000)
} else {
// Iterate through the random language selected, changing each DOM element sequentially
const language = languages[languageIndex]
welcomeTitle.textContent = language[0]
setTimeout(() => toTitle.textContent = language[1], 1000)
setTimeout(() => landingTitle.textContent = language[2], 2000)
languageIndex++
}
}
const fadeAnimation = () => {
const welcomeTitle = document.getElementById('welcome-landing-header')
const toTitle = document.getElementById('to-landing-header')
const landingTitle = document.getElementById('landing-title')
welcomeTitle.className = '';
toTitle.className = '';
landingTitle.className = '';
setTimeout(() => welcomeTitle.className = 'fade', 10)
setTimeout(() => toTitle.className = 'fade', 1000)
setTimeout(() => landingTitle.className = 'fade', 2000)
}
setInterval(changeHeading, 3000)
setInterval(fadeAnimation, 3000)
</script>
</body>
</html>