一、過(guò)渡

(1) 將需要做動(dòng)畫(huà)或過(guò)渡效果的內(nèi)容，用transition包起來(lái),并命名name

 <transition name="box">
   <div class="box" v-show="isShow">我一定會(huì)回來(lái)的</div>
 </transition>

（2）寫樣式

<style>
//進(jìn)入時(shí)樣式 和 離開(kāi)時(shí)樣式
.box-enter-active,
.box-leave-active {
  transition: all 1s;
}

// 進(jìn)入之前樣式 和 離開(kāi)之后樣式
.box-enter,
.box-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>

(2)給列表添加動(dòng)畫(huà)或過(guò)渡效果，用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）導(dǎo)入

import { nanoid } from 'nanoid'

（3）使用

 this.goodses.push({
id:nanoid(),
name:'豐田'
})