如何创建一个css动画滑升通知消息？

Question

我想创建一个css动画滑升通知确认消息。我使用的是react js，消息应该从页面底部向上滑动，在那里停留几秒钟，然后滑落到看不见的地方。我遇到的问题是，消息只是向下滑动，似乎看不到，但如果你向下滚动，你可以在页面底部看到它。这可能与css显示属性有关。

编辑

这是我正在使用的通知组件。我从网上的某个地方得到它，并对它做了一些修改。

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const Container = styled.div`
    background-color: ${props => props.backgroundColor};
    color: ${props => props.color};
    padding: 16px;
    position: absolute;
    bottom: ${props => props.shift}px;
    left: ${props => props.left};
    margin: 0 auto;
    z-index: 999;
    transition: bottom 1.0s ease;
    border-radius: 5px;
`;

export default function Notification({ msg, showNotification, set_showNotification, type = 'info', left = '35%', duration = 5000 }) {  // 'type' can also be 'error'
    const distance = 500;
    const [shift, set_shift] = useState(-distance);
    const [showing, set_showing] = useState(false);
    const [timeout, set_timeout] = useState(-1);

    const color = type === 'error' ? 'white' : 'black';
    const backgroundColor = type === 'error' ? 'darkred' : 'whitesmoke';

    useEffect(() => {
        return function cleanup() {
            if (timeout !== -1) {
                clearTimeout(timeout);
            }
        }
    }, [timeout]);

    if (showNotification && !showing) {
        set_shift(distance);
        set_showNotification(false);
        set_showing(true);

        let t = setTimeout(() => {
            set_shift(-distance);
            set_showing(false);
        }, duration);

        set_timeout(t);
    }

    return (
        <Container shift={shift} color={color} backgroundColor={backgroundColor} left={left}>{msg}</Container>
    );
}

Answer 1

使用谷歌。

https:/developer.mozilla.orgen-USdocsWebCSSCSS_AnimationsUsing_CSS_animations。

搭配 setTimeout() 函数，在动画结束后删除该类，就可以了。