vue項目筆記（29）-元件顯示的動畫

元件顯示的動畫

vue項目中，為優化使用者體驗，我們通常在元件顯示的時候，我們加上動畫效果。除了直接用transition标簽作為元件的跟标簽外，我們還可以把動畫效果抽離成元件，友善複用。

FadeAnimation.vue

<template>
  <transition>
    <slot></slot>
  </transition>
</template>
<script>
  export default{
    name: 'FadeAnimation'
  }
</script>
<style scoped lang="stylus">
  .v-enter, .v-leave-to
    opacity 0

  .v-enter-active, .v-leave-active
    transition opacity 0.8s
</style>
           

本例中，我們對Banner.vue中的Commongallery.vue元件使用該動畫效果。我們需要這樣做：

import FadeAnimation from 'common/fade/FadeAnimation'           

<fade-animation>
      <common-gallery :imgs="imgs" v-show="showGallery" @close="handleGalleryClose"></common-gallery>
    </fade-animation>