vue transition的延时播放

1、显示的控制（利用setTimeout控制v-show）

这里利用了mounted() 生命周期函数，实现页面自动播放

<template>
	<div class="container">
		<transition name="bounce-in">
			<div v-show="show" class="Demo">bounce-in</div>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		mounted() {
			setTimeout(() => {
				this.show = true;
			}, 2000)
		}
	}
</script>

<style>
	.bounce-in-enter-active {
		animation: bounce-in .5s;
	}

	.bounce-in-enter,
	.bounce-in-leave-to {
		opacity: 0;
	}

	@keyframes bounce-in {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.5);
		}

		100% {
			transform: scale(1);
		}
	}
	.Demo{
		color: #FFFFFF;
		width: 300px;
		height: 300px;
		background-color: #0088FF;
		position: absolute;
		top:25%;
		left:25%;
	}
</style>

2、 CSS的设置（可以使用transition+transition-delay控制，animation+animation-delay也可以但是初始就显示了）

transition使用时，可以使用transition-delay延时播放

<template>
	<div class="container">
		<transition name="bounce-in">
			<div v-show="show" class="Demo">bounce-in</div>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		mounted() {
			this.show = true;
		}
	}
</script>

<style>
	.bounce-in-enter-active {
		transition: all 0.3s ease;
		transition-delay: 2s;
	}
	.slide-fade-leave-active {
		transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.bounce-in-enter,
	.bounce-in-leave-to {
		transform: translateX(100px);
		opacity: 0;
	}

	@keyframes bounce-in {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.5);
		}

		100% {
			transform: scale(1);
		}
	}
	.Demo{
		color: #FFFFFF;
		width: 300px;
		height: 300px;
		background-color: #0088FF;
		position: absolute;
		top:25%;
		left:25%;
	}
</style>