- 安装
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
