javascript - 如何使文本淡入淡出并上升

Question

如何制作具有特定 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
}

Answer 1

来 self 的评论

I would actually use css to handle the animations because you should let the native implementation do the hard work (it's faster too). CSS-Tricks is a good reference. You could also use something like animate.css if you want to use a css framework.

编辑片段:见下文

给你。使用animate.css 。够简单吗？

删除infinite以表示非无限。查看animate css github for more info

<小时/>

Animate.css 是一个 css 框架，这意味着它们为您提供 css 样式表，您可以通过添加类来应用它们。在底层，animate.css 使用 CSS 关键帧。查看 fadeOutUp here 的源代码(CSS 实现) .

<小时/>

来自您的评论:

How would I make the text animate when I click a button?

添加EventListener单击以使用 classList 添加类

(再次编辑片段)

<小时/>

Quick question, how do I make it so the button will work more than once? Because right now you can only click it once and then it won't work anymore.

在动画结束时添加一个事件监听器，然后从元素中删除类。

<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>