vue-cli 过渡和nanoid

一、过渡

(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:'丰田'
})