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