react Or vue中引入animate.css

animate.css老版本官方文档

animate.css新版本官方文档

npm 下载 animate.css

下面介绍的是老版本的动画使用：

npm i animate.css@3.5.2

或者 link引入在线连接

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

使用：
如果是npm下载需要在index.js中引入

import 'animate.css'

页面使用
animated fadeIn

animated ：必写
fadeIn：样式名

 render(){
   
        return (
            <div className="eat animated  fadeIn" >
                <Breadcrumb separator="—" className="menuShop">
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>eat</Breadcrumb.Item>
                </Breadcrumb>
                <div id="main" style={
   {
   width: "600px",height:"400px"}}></div>
            </div>
        )
    }

vue路由动画:

    <transition
      enter-active-class="animated bounceInRight"
      leave-active-class="animated bounceInRight"
      :duration="2000"
      appear
    >
      <!-- appear 第一次渲染就开始动画 -->
      <!-- :duration="{ enter: 200, leave: 2000 }" -->
      <router-view></router-view>
    </transition>