我在网页上有一个文本标题，该文本标题是按时间间隔顺序地，动态地和随机地修改的。目前，我正在使用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已修改的元素添加淡入/淡出动画，而不是更改文本而没有当前的动画。这很困难，因为一次有3个交错的动画（一个用于“欢迎”，一个用于“收件人”，一个用于“我讨厌学校”）。如果有人可以帮助我或提供更有效的解决方案，我将不胜感激！谢谢！
您可以使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句