vue 跳轉頁面動畫 從左到右，從右到左

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