0

I am creating a fade out warning/error message (bootstrap style) in a react component, and I am having some issues with the fade out timing.

My fade out works fine so far, and this is how it's done now:

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

Now, I would like to remove the setTimeout and the state, making it a functional stateless component. My problem is that the transition-delay in my style seems not to work, and I am afraid it is related to how classNames applies the classes to the component.

Here my style:

.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;

Thanks

gianni
  • 1,199
  • 2
  • 14
  • 28
  • 1
    Working with css animations and component lifecycle is not a good pattern. I strongly recommend https://github.com/reactjs/react-transition-group – Hemerson Carlin Nov 14 '17 at 09:14

1 Answers1

0

Toast component of the BluePrint framework handles that with a timeout functionality. You can extract out the same functionality from its source code

As far as I know, you cannot achieve the animation only through CSS in react at the moment.

Sajith Edirisinghe
  • 1,707
  • 1
  • 12
  • 18