• 安装

yarn add animate.css // 默认安装到dependencies
或者
npm install animate.css // 默认安装到dependencies

• vue项目引入

// main.js
import animate from 'animate.css'
Vue.use(animate)

• 单个节点过渡

<transition
    enter-active-class="animate__animated animate__bounceInRight"
    leave-active-class="animate__animated animate__bounceOutLeft"
  >
      <!-- <div v-show="show">hello</div> 效果相同，动态组件也带这个动态效果-->
      <div v-if="show">hello</div>
  </transition>

• 列表过渡
  注意：每个节点都有有唯一的key

<transition-group
        transition
        :duration="{ enter: 3000, leave: 300 }"
        enter-active-class="animate__animated animate__bounceInRight"
        leave-active-class="animate__animated animate__bounceOutLeft"
      >
        <div
          class="item"
          v-for="(item, index) in displayData"
          :key="index + item.order"
        >
          <div class="order">
            业务单号：{{ item.order ? item.order : "--" }}
          </div>
          <div class="order-infos">
            <div
              class="order-info-item"
              v-for="(value, index) in item.outStoreInfo"
              :key="index"
            >
              <div class="one">
                {{ value.otype === 1 ? "出库信息" : "入库信息" }}：{{
                  value.mname ? value.mname : "--"
                }}
              </div>
              <div
                class="two"
                :style="`color: ${value.otype === 1 ? '#EEBE10' : '#00DAFC'}`"
              >
                {{ value.type ? value.type : "--" }}
              </div>
              <div class="thre">{{ value.mnum ? value.mnum : "--" }} m³</div>
              <img
                v-if="value.otype === 1"
                class="image"
                src="../../../../../assets/images/yingHongCangChuKanBan/triangle.png"
                alt=""
                width="8px"
                height="8px"
              />
              <img
                v-if="value.otype === 2"
                class="image"
                src="../../../../../assets/images/yingHongCangChuKanBan/blueTriangle.png"
                alt=""
                width="8px"
                height="8px"
              />
            </div>
          </div>
        </div>
      </transition-group>

• 各个阶段钩子函数

  
  
  image.png
  
  
  image.png

vue官网 进入/过渡 & 列表过渡链接：https://cn.vuejs.org/v2/guide/transitions.html

animate.css https://animate.style/