（四）VUE动态组件、过渡小demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>Document</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">  -->
	<style type="text/css">
		html, body, ul{
			margin: 0;
			padding: 0;
		}
		html, body, #app{
			height: 100%;

		}
		#app{
			display: flex;
			flex-direction: column;
		}
		ul li{list-style: none;}
		main{
			background: pink;
			flex:1;
		}
		main div{
			height: 100vw;
		}
		footer, header{
			height: 12vw;
			text-align: center;
			line-height: 12vw;
		}
		footer ul{
			display: flex;
			justify-content: space-around;
		}
		footer ul li{
			flex: 1;
		}
		.active{
			color: purple;
			font-weight: bold;
			background: #91E564;
		}

		/*过渡*/
       /* .pageTransit-enter, .pageTransit-leave-to{/*组件进入前和离开之后的透明度*/
       /*     opacity: 0;
       /* }
       /* .pageTransit-enter-active, .pageTransit-leave-active{/*组件进入 / 组件离开 的过渡持续时间*/
       /*     transition: opacity 0.6s;
        }*/
        /*动画*/
		.pageTransit-enter-active{/*组件进入 要执行的动画及配置*/
			animation: bounceInRight .4s;
		}
		.pageTransit-leave-active{/*组件离开 要执行的动画及配置*/
			animation: zoomOutLeft .3s;
		}
		@keyframes zoomOutLeft {
		    40% {
		        opacity: 1;
		        transform: scale3d(.475,.475,.475) translate3d(42px,0,0)
		    }

		    to {
		        opacity: 0;
		        transform: scale(.1) translate3d(-2000px,0,0);
		        transform-origin: left center
		    }
		}
		@keyframes bounceInRight {
		    0%,60%,75%,90%,to {
		        animation-timing-function: cubic-bezier(.215,.61,.355,1)
		    }

		    0% {
		        opacity: 0;
		        transform: translate3d(3000px,0,0)
		    }

		    60% {
		        opacity: 1;
		        transform: translate3d(-25px,0,0)
		    }

		    75% {
		        transform: translate3d(10px,0,0)
		    }

		    90% {
		        transform: translate3d(-5px,0,0)
		    }

		    to {
		        transform: none
		    }
		}

	</style>
</head>
<body>
	<div id="app">
		<header>我是公共头部</header>
		<main>
			<!-- component组件中，每当切入到当前组件都会执行created！，因为默认组件在切出时被销毁了用keep-alive组件让组件不被销毁，并可以添加activated钩子函数在切入到的时候会被执行 -->
				<transition name="pageTransit" mode="out-in">
					<keep-alive><!-- keep-alive要放在transition内部，不然keep-alive失效 -->
							<component :is="curr"></component>
					</keep-alive>
				</transition>

		</main>
		<footer>
			<ul>
				<li @click="changePage(item)" :class="{active: curr===item}" v-for="(item, i) in comList">{{item}}</li>
			</ul>
		</footer>
	</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
	let Index = {
		template: `<div style="color: blue;background: grey;">我是首页！</div>`
		,
		created(){
			console.log('created')
		},
		activated(){
			console.log('activated')
		}
	}
	let My = {
		template: `<div style="color: orange;background: yellow;">我是个人中心</div>`
		,
		created(){
			console.log('created')
		},
		activated(){
			console.log('activated')
		}
	}
	let Comment = {
		template: `<div style="color: red;background: green;">我是评论页！</div>`
		,
		created(){
			console.log('created')
		},
		activated(){
			console.log('activated')
		}
	}
	new Vue({
		el: "#app",
		data: {
			curr: "index",
			comList: ["index", "my", "comment"]
		},
		components:{
			index: Index,
			my: My,
			comment: Comment
		},
		methods:{
			changePage(item){
				this.curr = item;
			}
		}
	})

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

效果图：

过渡、动画的使用：

1.将需要过渡或动画的组件或元素放到transition组件中；

2.定义name属性，表示给该动画组件取一个自定义名字，还可以定义mode属性，指示过渡模式，取值为in-out/out-in

3.定义过渡状态的样式

如果自己也不知道想要什么样的动画效果可以借鉴一下动画插件的动画效果，利用animate.css的代码，需要什么动画效果到官网查看，再根据效果名称到animate.css源码中找到对应代码，直接复制到自己代码中使用，如下图，源码是被压缩过的，可以点击代码下方的“{}”将代码格式化（红色圈圈处）。

（四）VUE动态组件、过渡小demo

猜你喜欢