Vue中JavaScript钩子transition圆点半场动画（加入购物车）

最新推荐文章于 2024-07-01 13:34:04 发布

haoqi好奇

最新推荐文章于 2024-07-01 13:34:04 发布

阅读量418

点赞数

分类专栏： Vue 案例

本文链接：https://blog.csdn.net/qq_41956789/article/details/99708985

版权

Vue 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

案例

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>圆点动画</title>
		<script src="lib/vue-2.4.0.js"></script>
		<style>
			.ball{
			background-color: red;
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
	</style>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="flag=!flag" value="添加到购物车" />
			<!-- 绑定事件 -->
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
				<div v-show="flag" class="ball">
				</div>
			</transition>
		</div>
		<script>
			var 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(150px,450px)"
						el.style.transition='all 1s ease'
						// 完成,调用done
						done()
					},
					afterEnter(el){
						this.flag=!this.flag
					}
				}
			})
		</script>
	</body>
</html>

haoqi好奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中JavaScript钩子transition圆点半场动画（加入购物车）

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
复制链接

扫一扫

专栏目录