vue 模拟购物车小球动画

最新推荐文章于 2023-10-27 18:49:00 发布

zhangleia

最新推荐文章于 2023-10-27 18:49:00 发布

阅读量202

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhangleia/article/details/103723387

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

注意事项：

1.给 transition 添加个 name 属性

2. enter 中 transition 和 translate 顺序不要写错

3. enter 中要写 el.offsetWidth

以上三点会影响动画效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>动画-钩子函数实现购物车半场动画</title>
	<script type="text/javascript" src='../lib/vue.js'></script>
	<style type="text/css">
		.ball {
			background-color: red;
			width:50px;
			height:50px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="加入购物车" @click='flag=!flag'>
		<!-- 注意，下面transition 这一行方法名后加()会报错 -->
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" name="cart_add">
			<div class="ball" v-if="flag"></div>
		</transition>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false
		},
		methods: {
			// 注意，动画钩子函数第一参数el，表示要执行动画的Dom元素，是个原生的JS DOM 对象，可以认为 el 是通过document.getElementById('') 方式获取到原生DOM对象
			beforeEnter(el){
				// 在动画入场前，此时动画尚未开始，设置元素开始动画前的起始样式
				el.style.transform = "translate(0, 0)";
			},
			enter(el,done){
				el.offsetWidth
				// enter表示动画开始之后的样式，可以设置小球完成动画之后的结束状态
				
				el.style.transition = "all 1s ease";
				el.style.transform = "translate(150px,500px)";
				// 这个done 相当于调用了afterEnter()
				done()
			},
			afterEnter(el){
				console.log(22)
				this.flag = !this.flag
			}
		}
	})
	
</script>
</html>

zhangleia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 模拟购物车小球动画

注意事项：1.给 transition 添加个 name 属性2. enter 中 transition 和 translate 顺序不要写错3. enter 中要写 el.offsetWidth以上三点会影响动画效果<!DOCTYPE html><html><head> <meta charset="utf-8"&g...
复制链接

扫一扫