SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
	<style type="text/css">
	body{padding:20px;}
	li{width:100%;}
		.hhc-enter-to,
		.hhc-leave{
		}
		.hhc-enter,
		.hhc-leave-to{
			opacity: 0;
			transform: translateX(200px);
		}
		.hhc-enter-active,
		.hhc-leave-active{
			transition: .5s;
		}

		.hhc-move{
			transition: .5s;
		}
		.hhc-leave-active{
			position: absolute;
		}

		.globe{
			width:50px;
			height:50px;
			text-align: center;
			color:white;
			background-color: red;
			border-radius: 50%;
			
		}
	</style>
</head>
<body>

<div id="app">
	<form class="form-inline">
		<input type="" v-model="name" class=" form-control">
		<input type="button" value="add" @click="add" class="btn btn-primary">
	</form>
	

	<transition-group name="hhc" tar="ul" class="list-group" appear>
		<li 
		v-for="item,index in list" 
		:key="item.id" 
		class="list-group-item danger"
		@click="del(index)">
			{{item.id}}---{{item.name}}
		</li>
	</transition-group>
	<hr>
	<input type="button" name="" value="添加购物车" @click="flag=!flag">
	<transition
	@before-enter="beforeEnter"
	@enter="enter"
	@after-enter="afterEnter">
		<div class="globe" v-show="flag">1</div>
	</transition>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
	new Vue({
		data:{
			flag:false,
			id:2,
			name:'',
			list:[
				{
					name:'张三',
					id:1
				},
				{
					name:'李四',
					id:2
				}
			]
		},
		methods:{
			add(){
				this.list.push({name:this.name,id:++this.id})
				this.name = ''
			},
			del(index){
				this.list.splice(index,1)
			},
			beforeEnter(el){
				console.log('start')
				el.innerHTML = +(el.innerHTML)+1
				el.style.transform = 'none'
			},
			enter(el,done){
				el.offsetTop;

				el.style.transform = 'translate(100px,400px)'
				el.style.transition = '.5s'

				done()
			},
			afterEnter(el){
				this.flag = !this.flag
			},
		}
	}).$mount('#app')

</script>
</body>
</html>