本文共 880 字，大约阅读时间需要 2 分钟。

如何使用这个组件呢

组件显示的动画

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组件使用该动画效果。我们需要这样做：

（1）在Banner.vue组件中引入FadeAnimation.vue

import FadeAnimation from 'common/fade/FadeAnimation'

（2）用<fade-animation></fade-animation>标签包裹<common-gallery></common-gallery>

    <fade-animation>

      <common-gallery :imgs="imgs" v-show="showGallery" @close="handleGalleryClose"></common-gallery>     </fade-animation> 另一种使用动画的方式，请参考本人博客：vue入门-动画 ---------------------  作者：CHH5431  来源：CSDN  原文：https://blog.csdn.net/qq_41115965/article/details/81805084  版权声明：本文为博主原创文章，转载请附上博文链接！