Vue2.5 学习笔记 9.7 动画效果

这节教程的实现： 将上次那个detail/banner.vue的图片预览与取消预览的动作做动画效果过渡。

1. 新建fadeanimation组件，有可能别的组件也会用到 所以坐公共

// FadeAnimation.vue

<template>
// 通过包裹插槽的形式实现动画效果
  <transition>
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="stylus" scoped>
// 渐隐渐现 具体参考之前的笔记
  .v-enter, .v-leave-to
    opacity: 0
  .v-enter-active, .v-leave-active
    transition: opacity 0.5s
</style>

然后去detail/banner.vue中修改代码

 

// Banner.vue

// 先导入组件

import FadeAnimation from 'common/fade/FadeAnimation'

  components: {
    CommonGallary,
    FadeAnimation
  }
// 然后将事件元素包裹起来 就完成了。
    <fade-animation>
      <common-gallary
        :imgs="gallaryImgs"
        v-show="showGallary"
        @close="handleGallaryClose"
      >
      </common-gallary>
    </fade-animation>

然后就可以了 = =很简单有没有