vue
/
Vue


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!DOCTYPE html>
<html lang="zh">

	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<link href="../css/style.css" rel="stylesheet"> </head>

	<body>
		<div id="myApp">
			<!-- 简单元素 -->
			<transition>
				<div v-if="ok">toggled content</div>
			</transition>

			<!-- 动态组件 -->
			<transition name="fade" mode="out-in" appear>
				<component :is="view"></component>
			</transition>

			<!-- 事件钩子 -->
			<div id="transition-demo">
				<transition @after-enter="transitionComplete">
					<div v-show="ok">toggled content</div>
				</transition>
			</div>
		</div>
		<script>
			var myApp = new Vue({
				el: '#myApp',
				data: {

				},
				methods: {
					transitionComplete: function(el) {
						// 传入 'el' 这个 DOM 元素作为参数。
					}
				}
			});
			myApp.$mount('#transition-demo')
		</script>
	</body>

</html>