一、过渡
(1) 将需要做动画或过渡效果的内容,用transition包起来,并命名name
<transition name="box">
<div class="box" v-show="isShow">我一定会回来的</div>
</transition>
(2)写样式
<style>
//进入时样式 和 离开时样式
.box-enter-active,
.box-leave-active {
transition: all 1s;
}
// 进入之前样式 和 离开之后样式
.box-enter,
.box-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
(2)给列表添加动画或过渡效果,用transition-group, tag="ul"代替ul
<transition-group name="box" tag="ul">
<li v-for="(item,index) in goodses" :key="item.id">{{item.name}}
<button @click="goodses.splice(index,1)">删除</button>
</li>
</transition-group>
二、nanoid
(1)安装
npm install nanoid
(2)导入
import { nanoid } from 'nanoid'
(3)使用
this.goodses.push({
id:nanoid(),
name:'丰田'
})