Vue 常用 transition 動畫效果記錄

緣氏集團技術員發表於2018-07-15
Vue動畫

先簡單介紹下 transition 標籤的使用方法

主要用於 v-show, v-if 或 router-view 的進出場動畫

  • 模板
    <transition name="name" >
      <div v-show="show" ></div>
      <div v-if="show" ></div>
      <router-view/>
    </transition>
複製程式碼
  • CSS
    // 定義進入前與離開後狀態
    .name-enter, .name-leave-to {
      ...
    }
    // 定義離開前與進入後狀態
    .name-leave, .name-enter-to {
      ...
    }
    // 定義進出過程
    .name-enter-active, .name-leave-active {
      transition: all .5s
    }
複製程式碼

1. fade 淡化進出

    .fade-enter, .fade-leave-to {
      opacity: 0
    }
    .fade-leave, .fade-enter-to {
      opacity: 1
    }
    .fade-enter-active, .fade-leave-active {
      transition: all .2s
    }
複製程式碼

2. scale 縮放進出

    .scale-enter, .scale-leave-to {
      transform: scale(0)
    }
    .scale-leave, .scale-enter-to {
      transform: scale(1)
    }
    .scale-enter-active, .scale-leave-active {
      transition: all .2s
    }
複製程式碼

3. left 左側進出 (通常用於左側邊欄)

    .left-enter, .left-leave-to {
      transform: translate3d(-100%, 0, 0)
    }
    .left-leave, .left-enter-to {
      transform: translate3d(0, 0, 0)
    }
    .left-enter-active, .left-leave-active {
      transition: all .2s
    }
複製程式碼

4. right 右側進出 (通常用於右側邊欄)

    .right-enter, .right-leave-to {
      transform: translate3d(100%, 0, 0)
    }
    .right-leave, .right-enter-to {
      transform: translate3d(0, 0, 0)
    }
    .right-enter-active, .right-leave-active {
      transition: all .2s
    }
複製程式碼

5. top 頂部進出 (通常用於提示彈窗)

    .top-enter, .top-leave-to {
      transform: translate3d(0, -100%, 0)
    }
    .top-leave, .top-enter-to {
      transform: translate3d(0, 0, 0)
    }
    .top-enter-active, .top-leave-active {
      transition: all .2s
    }
複製程式碼

相關文章