<head> ???<meta charset="utf-8"> ???<title></title> ???<script type="text/javascript" src="vue.js"></script> ???<style type="text/css"> ???????.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; ???????} ???</style></head><body> ???<div id="example-1"> ???????<button v-on:click="show = !show"> ???????????Toggle render ???????</button> ???????<transition name="slide-fade"> ???????????<p v-if="show">Hello</p> ???????</transition> ???</div> ???<script> ???????new Vue({ ???????????el:‘#example-1‘, ???????????data:{ ???????????????show:true ???????????} ???????}) ???</script></body>CSS过渡
原文地址：http://www.cnblogs.com/ItIsInteresting/p/7750675.html