<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中css动画原理</title>
		<script src="vue.js"></script>
		<!-- vue在过渡动画中定义的css样式 -->
		<style type="text/css">
			.v-enter,
			.v-leave-to{
				opacity: 0;
			}
			.v-enter-active,
			.v-leave-active{
				/* 如果检测到opacity发生了改变，那vue就会让这个改变在3s内完成，从而实现过渡效果 */
				transition: opacity 3s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 使用css原理实现一个过渡动画 -->
			<!-- 1：给需要添加动画效果的dom外层套一个transition，
			 vue就会自动给transition里的dom元素添加class样式，完成一个动画效果-->
			<transition>
				<div v-if="show">hello world</div>
			</transition>
			<button type="button" @click="handleBtn">出现/隐藏</button>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					show:true
				},
				methods:{
					handleBtn:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>