vue 模拟加入购物车动画源码

最新推荐文章于 2024-08-07 16:12:37 发布

原创最新推荐文章于 2024-08-07 16:12:37 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue.js创建一个动态的购物车动画效果。通过HTML、CSS和Vue.js的结合，实现了一个小球从按钮位置移动到屏幕另一侧的动画，展示了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>