Javascript 如何创建css动画向上滑动通知消息？

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

编辑

这是我正在使用的通知组件。我从网络上的某个地方得到了它，并为它制作了几个mod：

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>
    );
}

import React，{useState，useffect}来自“React”；
从“样式化组件”导入样式化；
const Container=styled.div`
背景色：${props=>props.backgroundColor}；
颜色：${props=>props.color}；
填充：16px；
位置：绝对位置；
底部：${props=>props.shift}px；
左：${props=>props.left}；
保证金：0自动；
z指数：999；
过渡：底部1.0秒轻松；
边界半径：5px；
`;
导出默认函数通知（{msg，showNotification，set_showNotification，type='info'，left='35%'，duration=5000}）{/'type'也可以是'error'
常数距离=500；
const[shift，set_shift]=useState（-distance）；
const[showing，set_showing]=使用状态（false）；
const[timeout，set_timeout]=useState（-1）；
const color=type=='error'？'white'：'black'；
const backgroundColor=type=='error'？'darkred'：'whitesmoke'；
useffect（（）=>{
返回函数cleanup（）{
如果（超时！=-1）{
clearTimeout（超时）；
}
}
}，[timeout]）；
如果（显示通知和显示）{
设置_移位（距离）；
设置显示通知（false）；
设置_显示（真）；
让t=setTimeout（（）=>{
设置_移位（-distance）；
设置_显示（假）；
}，持续时间）；
设置_超时（t）；
}
返回(
{msg}
);
}

使用谷歌

---

将其与一些

setTimeout（）

函数配对，以便在动画结束后删除该类，您可以开始了

向我们展示您刚才编辑我的原始帖子时尝试的内容。在那里你可以看到我的代码。从左，右或顶部滑动div似乎更容易，我可能只是走这条路线，但由于我目前正在从底部向上滑动（并返回到看不见的地方，或尝试），我有兴趣让它工作。有时我可以向下滚动并看到div，这就是问题所在。似乎有希望用另一个位置设置为固定的div来包装div。