如何使文字淡入淡出

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>