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">×</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
0 Comments