vue中动画封装

倚楼听风雨的行者

于 2019-07-11 16:26:28 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/qq_42972187/article/details/95489273

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<style>
			/*不写name 默认是v*/
			.v-enter{
				opacity: 0;
			}
			.v-enter-active{
				transition:opacity  3s;
			}
			/*显示到隐藏*/
			.v-leave-to{
				opacity: 0;
			}
			.v-leave-active{
				transition:opacity  3s;
			}
		</style>-->
		<script src='./vue.js'></script>
	</head>
	<body>
		<div id="root">
			<!--动画必须用transition标签当一个元素被transition标签包裹后vue会分析css样式-->
		
		<fade :show="show">	
		<div>我是封装的动画组件</div>
		</fade>
		
		<fade :show="show">	
		<h1>hH h哈哈哈哈</h1>
		</fade>
		<!--<transition >
					<div v-show="show">helloworld</div>
			</transition>-->
		
			<button @click="handleclick">切换</button>
		</div>
		<script>
			Vue.component('fade',{//fade组件名
				props:['show'],//接收变量需要传的变量
				template:`
				<transition @before-enter="handleBeforeEnter"  v-on:enter="handleenter" >
					<slot v-if="show"></slot></transition>`,//这里是要写v-if 写v-show没作用
					methods:{
						  handleBeforeEnter(el){
						el.style.color="red"
					},
					handleenter(el,done){
						setTimeout(()=>{
							el.style.color="green"
							done()
						},2000)
					}
					
					}
			})
			var vm = new Vue({
				el:'#root',
				data:{
					show:true
				},
				methods:{
					handleclick(){
						this.show=!this.show
					}，
				}
				
			})
			
		//fade-enter fade-enter-active  自动构建流程 通过某一时刻 给css加样式 通过css3属性动画实现
		</script>
	</body>
</html>

倚楼听风雨的行者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中动画封装

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--<style> /*不写name 默认是v*/ .v-enter{ opacity: 0; } .v-enter-ac...
复制链接

扫一扫