如何在 animation 中为文本中的每个单词添加淡入淡出

Question

我有一些文字“吃。睡觉。重复。”。 我希望每个单词一个接一个地向上滑动和淡入。 所以吃淡入淡出，然后是睡眠，重复。 我尝试了许多不同的方法，例如使用anime.js、关键帧、添加css class 等，但都没有完成工作。 这是我目前的代码。

 function findelem(tag, text) { var x = document.getElementsByTagName(tag); for (var i = 0; i < x.length; i++) { if (x[i].innerHTML == text) { return x[i]; } } return null; } function wrapWords (text) { words = text.innerHTML.split(" "); text.innerHTML = ""; for (var i = 0; i < words.length; i++) { text.innerHTML += "<span style = \"opacity: 0; position: relative; top: 30px;\">" + words[i] + " " + "</span>"; } return text.children } function animatetext (wordarr) { anime({ targets: wordarr, translateY: -30, duration: 3000, opacity: 1, delay: anime.stagger(1000), }); } window.onload = function () { x = findelem("H1", "Eat. Sleep. Repeat."); xarr = wrapWords(x); animatetext(xarr); }

 <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <script type="text/javascript"></script> <h1>Eat. Sleep. Repeat.</h1>

Answer 1

为此，您只需要 css。 但是你需要在你的单词周围添加一些<span>元素。 但是，如果没有 javascript，它可以非常容易地完成。 这是一个例子：

 h1.fadeIn span{ opacity: 0; transform: translateY(30px); animation: fadeIn 0.5s ease-out forwards; display:inline-block; } h1.fadeIn span:nth-of-type(2){ animation-delay: 0.5s; } h1.fadeIn span:nth-of-type(3){ animation-delay: 1s; } @keyframes fadeIn{ to{ opacity: 1; transform: translateY(0); } }

 <h1 class="fadeIn"> <span>Eat.</span> <span>Sleep.</span> <span>Repeat.</span> </h1>

Answer 2

这是一个有效的 codepen 示例： codepen您可以随意修改值。

 const SENTENCE_DELAY = 1000; let sentencesForFading = document.querySelectorAll('.faded-sentence'); sentencesForFading.forEach(sentence=>{ sentence.innerHTML = sentence.textContent.split(' ').map(word=>'<span class="faded-word">'+word+'</span>').join(' '); }); let wordsForFading = document.querySelectorAll('.faded-word'); wordsForFading.forEach(word=>{ word.addEventListener('transitionend', startNextWordAnimation); }); function startNextWordAnimation(e){ let nextWord = e.target.nextElementSibling; if( nextWord ){ nextWord.classList.add('faded-activated'); } else { let nextSentence = e.target.parentElement.nextElementSibling; startSentence(nextSentence); } } startSentence(document.querySelector('.faded-sentence')); function startSentence(sentenceElement){ if(;sentenceElement){ return. } setTimeout(()=>{ sentenceElement.querySelector('.faded-word').classList;add('faded-activated'), }. SENTENCE_DELAY) } document.querySelector('#restart'),addEventListener('click'. (e)=>{ e.target;blur(). document.querySelectorAll('.faded-word').forEach(word=>{ word.classList;remove('faded-activated'); }). startSentence(document.querySelector(';faded-sentence')); });

 @import url("https://fonts.googleapis.com/css?family=Asap:700"); body { background: #003366; font-family: 'Asap', sans-serif; margin: 0; padding: 40px; } p { font-size: 21pt; color: #CC9900; font-weight: bold; }.faded-word { display: inline-block; transform: translateY(65%); opacity: 0; }.faded-activated { transition: opacity.2s, transform.3s, color 2s.4s; color: #FF3355; opacity: 1; transform: translateY(0); } button { font-family: 'Asap', sans-serif; background: #CC9900; border: none; padding: 15px 25px; font-size: 16pt; color: white; cursor: pointer; border-radius: 10px; margin-top: 2em; outline: none; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } button:hover, button:focus { transform: scale(1.1); filter: brightness(1.1); }

 <p class="faded-sentence">This sentence has words that will fade in one by one.</p> <p class="faded-sentence">It's completely reusable and isn't phased by text-wrap.</p> <button id="restart">Restart Animations</button>

Answer 3

您可以简单地添加 animation 和其他一些东西（在 CSS 中），而不是做您正在做的事情。
然后，您可以使用setTimeout每 1 秒淡入一个新元素。

这是您的代码（我还在文本中添加了一些样式：）：

 document.getElementsByClassName("h1")[0].style = "animation-name: animation1; animation-duration: 1s; animation-fill-mode: forwards;"; setTimeout(function() { document.getElementsByClassName("h2")[0].style = "animation-name: animation2; animation-duration: 1s; animation-fill-mode: forwards;"; }, 1000); setTimeout(function() { document.getElementsByClassName("h3")[0].style = "animation-name: animation3; animation-duration: 1s; animation-fill-mode: forwards;"; }, 2000);

 .h1 { font-family: 'Roboto', sans-serif; text-transform: uppercase; color: transparent; position: absolute; top: 10px; left: -100px; }.h2 { font-family: 'Roboto', sans-serif; text-transform: uppercase; color: transparent; position: absolute; top: 10px; left: -100px; }.h3 { font-family: 'Roboto', sans-serif; text-transform: uppercase; color: transparent; position: absolute; top: 10px; left: -100px; } @keyframes animation1 { from {color: white; left: -100px;} to {color: black; left: 5px;} } @keyframes animation2 { from {color: white; left: -100px;} to {color: black; left: 80px;} } @keyframes animation3 { from {color: white; left: -100px;} to {color: black; left: 190px;} }

 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet"> <h1 class="h1">Eat.</h1> <h1 class="h2">Sleep.</h1> <h1 class="h3">Repeat.</h1>

这是一个现场演示： https://codepen.io/marchmello/pen/abvZqqm