vue使用钩子函数制作动画

最新推荐文章于 2022-02-11 15:09:04 发布

哈哈hyc

最新推荐文章于 2022-02-11 15:09:04 发布

阅读量325

点赞数 1

分类专栏：前端前端——vue 文章标签： vue 前端 transition 钩子函数

本文链接：https://blog.csdn.net/erdfty/article/details/88680509

版权

前端同时被 2 个专栏收录

64 篇文章 4 订阅

订阅专栏

前端——vue

22 篇文章 0 订阅

订阅专栏

vue使用钩子函数制作简单动画效果，代码如下，仅供参考交流：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> -->
	<style>
		.ball{
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="快到碗里来" @click="flag=!flag">
		<transition 
			@before-enter="beforeEnter" 
			@enter="enter" 
			@after-enter="afterEnter">
			<div class="ball" v-show="flag"></div>
		</transition>
	</div>



	<script>
		//创建 Vue 实例，得到ViewModel
		var vm = new Vue({
			el: '#app',
			data: {
				flag: false
			},
			methods:{
				beforeEnter(el){
					el.style.transform = "translate(0, 0)"
					console.log(flag);
				},
				enter(el,done){
					el.offsetWidth
					el.style.transform = "translate(150px, 450px)"
					el.style.transition = "all 1s ease"

					done()
				},
				afterEnter(el){
					console.log('ok');
					this.flag = !this.flag
				}
			}
		})

	</script>
</body>
</html>

演示网站效果地址：http://hyc5.cn/cic.html

哈哈hyc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue使用钩子函数制作动画

vue使用钩子函数制作简单动画效果，代码如下，仅供参考交流：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫

专栏目录