Enter animation of Bootstrap Alert fails using reactstrap Alert component

by James McDonald | Jan 1, 2019 | IT Tips | 0 comments

I have been using CSSTransiton from react-transtion-group to animate the show and hiding of various elements on a page. I successfully added a few items and then tried to add a bootstrap alert and then the enter animation failed to fire. Here is an example of the problem I created on codesandbox

I traced the problem to the reactstrap Alert component

When you add the component it will by default add the CSS classes to do a fadeOut animation. From the docs regarding bootstrap alerts:

To animate alerts when dismissing them, be sure to add the .fade and .show classes.
https://getbootstrap.com/docs/4.1/components/alerts/

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

The reactstrap components seem to include the "show" class even when you set the prop fade={false} to turn the hide fade transition off

I found a work-a-round which involves setting the transition prop to blank out the "show" class: transition={{ baseClassActive: "" }}

import React from "react";
import Alert from "reactstrap/lib/Alert";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CSSTransition } from "react-transition-group";
// bootstrap.css is included from the root App.js component
import "../Styles/styles.css";
 
import {
    faExclamationCircle,
    faCheckCircle,
    faCheck,
    faThumbsUp,
    faQuestion,
    faQuestionCircle,
    faExclamationTriangle
} from "@fortawesome/free-solid-svg-icons";
 
library.add([
    faExclamationCircle,
    faCheckCircle,
    faCheck,
    faThumbsUp,
    faQuestion,
    faQuestionCircle,
    faExclamationTriangle
]);
 
const icons = color => {
    let icon = null;
    switch (color) {
        case "primary":
        case "secondary":
        case "success":
            icon = "thumbs-up";
            break;
        case "danger":
        case "warning":
            icon = "exclamation-triangle";
            break;
        case "info":
        case "light":
        case "dark":
        default:
            icon = "exclamation-circle";
    }
    return icon;
};
const AlertMessage = props => {
    let icon = icons(props.color);
    return (
        <CSSTransition
            in={props.show}
            timeout={300}
            classNames="toggen"
            unmountOnExit
        >
            <Alert
                transition={{ baseClassActive: "" }}
                color={props.color}
                fade={false}
            >
                <FontAwesomeIcon icon={icon} /> {props.message}
            </Alert>
        </CSSTransition>
    );
};
 
export default AlertMessage;

The versions that I am using:

react 16.7.0
react-transition-group 2.5.2
reactstrap 6.5.0

Just thought I would post this in the hope it would help someone else scratching their head regarding why their CSS Transitions and/or Animations were failing to work

Enter animation of Bootstrap Alert fails using reactstrap Alert component

0 Comments

Submit a Comment Cancel reply