<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>
原文：http://www.cnblogs.com/ItIsInteresting/p/7750675.html