购物车小球动画（私人仓库）https://blog.csdn.net/printf_hello/article/deta

blog.csdn.net/printf_hell…

</head>
<body>
	<div id="app">
		<button @click="flag = !flag"> + </button>
		<transition 
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter"
		>
		<span v-show="flag" class="round"></span>
		</transition>
	</div>
	<script type="text/javascript">
		let vm = new Vue({
			el:"#app",
			data(){
				return{
					flag:false,
				}
			},
			methods:{
				/*动画钩子函数的第一个参数必须是el，是一个原生js对象，表示要添加动画的元素
				*/
				beforeEnter(el){//动画开始之前，还没开始时的样式
					el.style.transform = "translate(0,0)";
				},
				enter(el,done){//动画开始后的样式，设置动画结束的状态
					el.offsetWidth;//这句不写就没动画效果，但不到为啥，写就对了，offsetTop offsetHeight
					el.style.transform = "translate(100px,400px)";
					el.style.transition = "all 1s ease";
					done();//相当于faterEnter函数，不加这行会有卡顿，延迟
				},
				afterEnter(el){//动画结束之后调用
					this.flag = !this.flag;
				}
			}
		})
	</script>
</body>