Vue2.0-过渡动画

最新推荐文章于 2024-04-15 22:11:57 发布

acheding

最新推荐文章于 2024-04-15 22:11:57 发布

阅读量238

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/bDreamer/article/details/118704052

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue2.0-3</title>
		<style>
			.fade-enter-active,
			.fade-leave-active {
				transition: opacity 3s;
			}
			
			.fade-enter,
			.fade-leave-to {
				opacity: 0;
			}
			
			.slide-fade-enter-active {
				transition: all .3s ease;
			}
			
			.slide-fade-leave-active {
				transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
			}
			
			.slide-fade-enter,
			.slide-fade-leave-to {
				transform: translateX(10px);
				opacity: 0;
			}
			
			.bounce-enter-active {
				animation: bounce-in .5s;
			}
			
			.bounce-leave-active {
				animation: bounce-in .5s reverse;
			}
			
			@keyframes bounce-in {
				0% {
					transform: scale(0);
				}
				50% {
					transform: scale(1.5);
				}
				100% {
					transform: scale(1);
				}
			}
			
			.list-item {
				display: inline-block;
				margin-right: 10px;
			}
			
			.list-enter-active,
			.list-leave-active {
				transition: all 1s;
			}
			
			.list-enter,
			.list-leave-to {
				opacity: 0;
				transform: translateY(30px);
			}
		</style>
	</head>

	<body>
		<div id="demo">
			<button v-on:click="show = !show">
		    	        Toggle
		        </button>
			<transition name="fade">
				<p v-if="show">hello</p>
			</transition>
		</div>

		<div id="example-1">
			<button @click="show = !show">
		    	        Toggle render
		        </button>
			<transition name="slide-fade">
				<p v-if="show">hello</p>
			</transition>
		</div>

		<div id="example-2">
			<button @click="show = !show">Toggle show</button>
			<transition name="bounce">
				<p v-if="show">Except for illness, the pain you feel is brought to you by your values, not real existence.</p>
			</transition>
		</div>

		<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
		<div id="example-3">
			<button @click="show = !show">
		                Toggle render
		        </button>
			<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
				<p style="margin-left: 80px;" v-if="show">hello</p>
			</transition>
		</div>

		<div id="list-demo" class="demo">
			<button v-on:click="add">Add</button>
			<button v-on:click="remove">Remove</button>
			<transition-group name="list" tag="p">
				<span v-for="item in items" v-bind:key="item" class="list-item">
		      		        {{item}}
		    	        </span>
			</transition-group>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script>
			new Vue({
				el: '#demo',
				data: {
					show: true
				}
			})

			new Vue({
				el: '#example-1',
				data: {
					show: true
				}
			})

			new Vue({
				el: '#example-2',
				data: {
					show: true
				}
			})

			new Vue({
				el: '#example-3',
				data: {
					show: true
				}
			})

			new Vue({
				el: '#list-demo',
				data: {
					items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
					nextNum: 10
				},
				methods: {
					randomIndex: function() {
						return Math.floor(Math.random() * this.items.length)
					},
					add: function() {
						this.items.splice(this.randomIndex(), 0, this.nextNum++)
					},
					remove: function() {
						this.items.splice(this.randomIndex(), 1)
					},
				}
			})

		</script>
	</body>

</html>