Vue学习笔记5.3 使用animate时同时使用自定义动画效果。 appear :duration

本文链接：https://blog.csdn.net/soulwyb/article/details/87002361

<!DOCTYPE html>
<html>
<head>
	<title>CSS过渡与动画效果</title>
	<script src="vue.js"></script>
	<link rel="stylesheet" href="animate.css">
//2.自定义样式
	<style>

		.fade-enter, .fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active, .fade-leave-active {
			transition: opacity 3s;
		}


	</style>
</head>
<body>
	<div id="app">
	<transition
		name="fade"

//4.有时候我们不希望使用第三方库的样式规定的时间。想自己定时间。那就可以用:duration
//  如果不想写这么复杂的话那就直接写：:duration=“10000” 单位是毫秒
//  或者可以使用type="transition" 表示使用transition样式的时间标准（3s）
//  不过这里要注意 如果使用了type的话  appear将无效

		:duration="{enter: 5000, leave: 10000}"

//1.可以再使用了animate样式之后再添加自定义样式。只需要在animated样式的后面再添加自定义样式名称即可

		enter-active-class="animated swing fade-enter-active"
		leave-active-class="animated shake fade-leave-active"

//3.appear是页面在刷新或载入的时候显示的样式

		appear
		appear-active-class="animated flash"
	>
		<div v-if="show">Hello World</div>
	</transition>
	<button @click="handleClick">切换</button>
	</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			show: true
		},
		methods: {
			handleClick: function() {
				this.show = this.show ? false : true
			}
		}
	})
</script>
</html>

再强调一下：

要注意如果使用了type的话 appear将无效