Vue 生成不重复的id & 动画

一.生成不重复的id

import {nanoid} from 'nanoid'
const todoObj = {id:nanoid(),title:this.title,done:false}

二.动画

1. 操作 css 的 trasition 或 animation
2. vue 会给目标元素添加/移除特定的 class
3. 过渡的相关类名：
     1). xxx-enter-active: 指定显示的 transition
     2). xxx-leave-active: 指定隐藏的 transition
     3). xxx-enter/xxx-leave-to: 指定隐藏时的样式

3.9.3 基本过渡动画的编码
1. 在目标元素外包裹<transition name="xxx">
2. 定义 class 样式
a) 指定过渡样式: transition
b) 指定隐藏时的样式: opacity/其它

动画实例

1. 用 transition 包裹动画标签,

appear属性 :  vue动画appear 实现页面刚展示出来的时候，入场效果

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

 多个动画效果,用 transition-group,并且key不能重复

<transition-group name="hello" appear>
 <h1 v-show="!isShow" key="1">你好啊！</h1>
 <h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>

有一篇很好的Vue——过渡与动画__洋的博客-CSDN博客