(4) VUE dynamic components, small transition 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;
		}

		/*transition*/
       /* .pageTransit-enter, .pageTransit-leave-to{/*The transparency of the component before entering and after leaving */
       /*     opacity: 0;
       /* }
       /* .pageTransit-enter-active, .pageTransit-leave-active{/*component enter/ transition duration for component leave*/
       /*     transition: opacity 0.6s;
        }*/
        /*animation*/
		.pageTransit-enter-active{/*The component enters the animation and configuration to be executed*/
			animation: bounceInRight .4s;
		}
		.pageTransit-leave-active{/*The animation and configuration to be performed when the component leaves*/
			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>I am a public header</header>
		<main>
			<!-- In the component component, created is executed whenever the current component is cut into! , because the default component is destroyed when it is cut out. Use the keep-alive component to keep the component from being destroyed, and you can add an activated hook function that will be executed when it is cut in -->
				<transition name="pageTransit" mode="out-in">
					<keep-alive><!-- keep-alive should be placed inside transition, otherwise keep-alive will fail-->
							<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;">I am the homepage! </div>`
		,
		created(){
			console.log('created')
		},
		activated(){
			console.log('activated')
		}
	}
	let My = {
		template: `<div style="color: orange;background: yellow;">I am the personal center</div>`
		,
		created(){
			console.log('created')
		},
		activated(){
			console.log('activated')
		}
	}
	let Comment = {
		template: `<div style="color: red;background: green;">I am a comment page! </div>`
		,
		created(){
			console.log('created')
		},
		activated(){
			console.log('activated')
		}
	}
	new View({
		el: "#app",
		data: {
			curr: "index",
			comList: ["index", "my", "comment"]
		},
		components:{
			index: Index,
			my: My,
			how: How
		},
		methods:{
			changePage(item){
				this.curr = item;
			}
		}
	})

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

Effect picture:

Use of transitions and animations:

1. Put the components or elements that need transition or animation into the transition component;

2. Define the name attribute, which means to give a custom name to the animation component. You can also define the mode attribute to indicate the transition mode. The value is in-out/out-in

3. Define the style of the transition state

If you don't know what kind of animation effect you want, you can learn from the animation effect of the animation plug-in, use the code of animate.css to see what animation effect you need on the official website, and then find the corresponding code in the source code of animate.css according to the effect name. Copy directly into your own code for use, as shown in the figure below, the source code is compressed, you can click "{}" below the code to format the code (in the red circle).

(4) VUE dynamic components, small transition demo

Guess you like