I'm looking to implement a dynamic CSS animation for a slide-up notification or confirmation message in my ReactJS project. The goal is for the message to smoothly slide up from the bottom of the page, linger briefly, and then gracefully slide back down out of view. However, I've encountered an issue where the message slides way too far down and appears out of sight, though it can still be seen at the bottom when scrolling. It seems like this problem might relate to the display properties in the CSS.
edit
Below is the code snippet for the notification component I am utilizing. I found it online and made a few modifications:
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>
);
}