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