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 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM