react 为何引入animate.css不成功

Question

1.引入依赖库
cnpm i animate.css
cnpm i react-addons-css-transition-group
2.导入模块

import "animate.css";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

使用
 <ReactCSSTransitionGroup
          transitionEnter={true}
          transitionLeave={true}
          transitionEnterTimeout={2500}
          transitionLeaveTimeout={1500}
          transitionName="animated"
  >

              <div key="amache" className="animated fadeInLeftBig" >
                   <img src="/assets/img/history/157.png" alt="" />
              </div>
 </ReactCSSTransitionGroup>

Answer 1

看看animate.css版本是3还是4，4版本要求clsss加上animate__前缀

import 'animate.min.css';

<div key="amache" className="animate__animated animate__fadeInLeftBig" >
   <img src="/assets/img/history/157.png" alt="" />
</div>

Answer 2

哈哈 我们又见面了 感觉是不太行
我先装了这个插件npm install react-transition-group --save
然后引入import {CSSTransition} from 'react-transition-group';
然后用这个组件把我的元素抱起来 但是一点效果都没有

 render() {
        return (
            <div className="home_body">
                <div>
                {/* {{...firstTableColumnStyle, ...anotherStyle}} */}
                <CSSTransition
                in={this.state.show}
                timeout={1000}//动画时长
                classNames='fade'//动画名称
                unmountOnExit//动画完成后DOM被移除
                //   onEntered={(el)=>{el.style.color='red'}}//当入场动画执行完成，CSSTransition包裹的元素的颜色变为红色
                appear = {true}//第一次进入页面也有动画效果
                >
                <div className="home_body_frame"  style={{...this.state.homeBodyFrame,...{backgroundImage:`url(${this.state.mainBody})`}}}></div>
              </CSSTransition>
                {/* <div className="home_body_frame"  style={{...this.state.homeBodyFrame,...{backgroundImage:`url(${this.state.mainBody})`}}}></div> */}
               {/* <div className="home_body_frame"  style={{...this.state.homeBodyFrame,...{backgroundImage:`url(${this.state.hand})`}}}></div> */}
                <div className="home_body_left"   style={{...this.state.homeBodyLeft,...{backgroundImage:`url(${this.state.hand})`}}}></div>
                <div className="home_body_title"  style={{...this.state.homeBodyTitle,...{backgroundImage:`url(${this.state.title})`}}}></div>
                <div className="home_body_right" style={{...this.state.homeBodyRight,...{backgroundImage:`url(${this.state.vis})`}}}></div>
                </div>
            </div>
        )
    }

@赫子子