如何使文本淡入淡出

哇

如何使具有特定ID的div淡入淡出并向上移动？这是一些伪代码：

y=400
opacity=0

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

y--
opacity-=0.01
}

里科·卡勒（Rico Kahler）

从我的评论

实际上，我会使用css来处理动画，因为您应该让本机实现来完成艰苦的工作（它也更快）。CSS-Tricks是一个很好的参考。如果要使用css框架，也可以使用诸如animate.css之类的东西。

编辑的代码段：请参见下文

干得好。使用animate.css。很简单？

移除infinite为非无限。查看animate css github以获得更多信息

Animate.css是一个CSS框架，这意味着它们为您提供了CSS样式表，您可以通过添加类来应用这些样式表。在幕后，animate.css使用css关键帧。fadeOutUp 在此处查看源代码（css实现）。

根据您的评论：

单击按钮时如何使文本动画化？

单击添加事件监听器以使用添加类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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。