html 页面
<template>
<transition name='slide'>
<div class="singer-detail">
</div>
</transition>
</template>
<style>
.slide-enter-active,.slide-leave-active{
transition :all 0.3s
}
.slide-enter,.slide-leave-to{
transform :translate3d(100%,0,0)
}
</style>
第二个例子，渐隐效果
先举一个典型的CSS过渡的例子：
<!-- 首先将要过渡的元素用transition包裹，并设置过渡的name，然后添加触发这个元素过渡的按钮（实际项目中不一定是按钮，任何能触发过渡组件的DOM操作的操作都可以） -->
<div>
<button @click="show=!show">show</button>
<transition name="fade">
<p v-show="show">hello</p>
</transition>
</div>// 接着为过渡类名添加规则
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s ease
&.fade-enter, &.fade-leave-active
opacity: 0