vue-cli 使用animate.css最简单的方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/alison_year920/article/details/82950802

1.npm install animate.css

2.在main.js引入 

import animate from 'animate.css'

Vue.use(animate);

<template>
 <transition name="zoom">
  <slot></slot>
 </transition>
</template>

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

<style scoped>
  .zoom-enter-active{
   animation :zoomIn .5s
   }
   .zoom-leave-active{
    animation :zoomOut .5s
   }
</style>

3.使用方式

封装好组件并

<fade-animation>

<common-gallary

:imgs="bannerImgs"

v-show="showGallary"

@close="handleGallaryClose"

></common-gallary>

</fade-animation>