I tried to add animation using Animation Add-Ons, following the example in the official document, but the animation didn"t work at all. Why?
jsx
import React from "react"
import ReactCSSTransitionGroup from "react-addons-css-transition-group"
import "./login.css"
class login extends React.Component {
render() {
return (
<div className="bg">
<div className="rocket animated infinite bounce"></div>
<div className="cloud"></div>
<div className="cloud2"></div>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}>
<div key="111">33333333333333</div>
</ReactCSSTransitionGroup>
</div>
)
}
}
export default login
css
.example-enter {
color: -sharpfff;
}
.example-enter.example-enter-active {
color: -sharp000;
transition: color 1000ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}