1. 程式人生 > >vue 模擬加入購物車動畫 原始碼

vue 模擬加入購物車動畫 原始碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模擬加入購物車動畫</title>
	<style type="text/css">
		.ball{
			width: 30px;
			height: 30px;
			position: absolute;
			border-radius: 50%;
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="動畫" @click = 'flag = !flag'>
		<transition v-on:before-enter = 'beforeEnter'
					v-on:enter = 'enter'
					v-on:after-enter = 'afterEnter'>
			<div class="ball" v-show = 'flag'></div>
		</transition>
	</div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el:'#app',
			data:{
				flag:false
			},
			methods:{
				beforeEnter(el){
					el.style.transform = 'translate(0, 0)'
				},
				enter(el,done){
					el.offsetWidth;
					el.style.transform = 'translate(200px, 300px)';
					el.style.transition = 'all 2s linear';
					done()
				},
				afterEnter(el){
					this.flag = !this.flag
				},
			}
		})
			
	</script>
</body>
</html>