vue项目组件显示的动画

水深无声 2022-04-13 04:27 250阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

如何使用这个组件呢

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

组件显示的动画  
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   
版权声明：本文为博主原创文章，转载请附上博文链接！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220413/ce3dcd0cc7c94cd5a5ae149ee24b3c9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220413/d0711535f1e84619b824f555300587cb.png