Я хочу создать css анимированное всплывающее уведомление / подтверждающее сообщение. Я использую response js, и сообщение должно скользить вверх из нижней части страницы, оставаться там на несколько секунд, а затем исчезать из поля зрения. У меня возникают проблемы, когда сообщение идет вниз и кажется, что его не видно, но если вы прокрутите вниз, вы увидите его внизу страницы. Это может иметь какое-то отношение к свойствам отображения css.
edit
Это компонент уведомления, который я использую. Я взял его где-то в сети и сделал к нему пару модов:
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>
);
}