I am currently working on implementing a fade out warning/error message (styled with Bootstrap) in a React component, however, I am encountering some challenges with the timing of the fade-out effect.
Up to this point, the fade out effect is functioning correctly. Here is how it's currently implemented:
import React, { Component } from 'react'
import classnames from 'classnames'
class AlertMessage extends Component {
state = ({ autoHide: false })
componentDidMount(){
const { autoHide } = this.props
if (autoHide && !this.state.hasClosed) {
setTimeout(() => {
this.setState({ autoHide: true, hasClosed: true })
}, 5000)
}
}
render() {
const { error, info, success, warning, text } = this.props
const classNames = {
'error': error,
'info': info,
'success': success,
'warning': warning,
'alert-hidden': this.state.autoHide
}
return (
<div className={classnames("alert-message", classNames)}>
{text}
</div>
)
}
}
export default AlertMessage
Currently, I would like to refactor the code to remove the setTimeout and state, transforming it into a functional stateless component. However, I am facing an issue where the transition-delay specified in my CSS does not seem to take effect, leading me to believe that it may be related to how the classNames are being applied to the component.
Here is my CSS style for reference:
.alert-message{
overflow-y: hidden;
opacity: 1;
max-height: 80px;
transition-property: all 450ms;
transition-duration: 450ms;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-delay: 5000ms;
Thank you.