如何使文字淡入淡出

Question

如何使特定ID的淡入淡出並上升？ 下面是一些僞代碼：

y=400 
opacity=0 

while (y > 100) { 
document.getElementById('text').style.position = y 
document.getElementById('text').style.opacity = opacity 

y-- 
opacity-=0.01 
} 

Answer 1

從我的評論

我想實際使用CSS來處理動畫，因爲你應該讓本機實現做艱苦的工作（它的速度更快也）。 CSS技巧是一個很好的參考。如果你想使用css框架，你也可以使用類似animate.css的東西。

編輯片段：見下文

在這裏你去。使用animate.css。夠簡單？

刪除infinite爲非無限。退房animate css github for more info

---

Animate.css是一個CSS框架，這意味着他們給你的CSS，你可以通過添加類應用樣式表。底層，animate.css使用css關鍵幀。查看fadeOutUphere的源代碼（css實現）。

---

從您的評論：

我將如何讓文字動畫，當我點擊一個按鈕？

上點擊添加EventListener（再次編輯段）使用classList

添加類

---

快速的問題，我怎麼讓它使按鍵會比多一旦？因爲現在你只能點擊一次，然後就不能再工作了。

爲動畫結束時添加EventListener，然後從元素中刪除類。

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 

 
<h1 class="thing-to-fade">Animate.css</h1> 
 
<button id="my-button">Fade Out Up</button> 
 
<script> 
 
    const element = document.querySelector('.thing-to-fade'); // define the element 
 
    document.querySelector('#my-button').addEventListener('click', event => { 
 
     element.classList.add('animated', 'fadeOutUp'); 
 
    }); 
 
    
 
    // add an eventlistener for the 'animationend' event 
 
    element.addEventListener('animationend', event => { 
 
     // after the animation ends, these classes will be removed 
 
     element.classList.remove('animated', 'fadeOutUp'); 
 
    }); 
 
</script>