console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
	</script>
	<style type="text/css">
		.v-enter,
		.v-leave-to {
			opacity: 0;
		}

		.v-enter-active,
		.v-leave-active {
			transition: opacity 1s
		}
	</style>
</head>

<body>
	<div id="app">
		<h3>列表过渡动画</h3>
		<!-- 
    列表渲染，使用 <transition-group> 组件
    1.不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>(列表渲染包裹的容器)。你也可以通过tag属性更换为其他元素。
    2.过渡模式(mode)不可用，因为我们不再相互切换特有的元素。
    3.内部元素 总是需要 提供唯一的 key 属性值。
    4.CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
     -->
		<transition-group tag="div">
			<div v-for="item of list" :key='item.id'>
				{{item.title}}---- {{item.id}}
			</div>
		</transition-group>
		<button @click="handleClick">切换</button>
    <button @click="list= []">删除</button>
  </div>
</body>
<script type="text/javascript">
  let count = 0
  let vm = new Vue({
    el: '#app',
    data: {
      list: []
    },
    methods: {
      handleClick () {
        this.list.push({
          id: count++,
          title: 'item'
        })
      }
    }
  })
</script>
</html>