1.下载Animate.css，放入srcassets 目录下

2.main.js 中引入import '@styles/animate.css' // animate css3动画，@styles是我设置的一个笔名，对应srcassetsstyles 目录

3.完整示例：

<template>
  <div class="container">

    <button
      class="btn"
      @click="showDiv(true)"
    >点我</button>

    <div
      class="shadow"
      @click="showDiv(false)"
      v-show="isShow"
    ></div>

    <transition enter-active-class="animated fadeIn">
      <div
        class="show-content"
        v-show="isShow"
      >
        我是内容区，点击阴影可以关闭我
        <p @click="showDiv(false)">点击我也可以关闭</p>
      </div>
    </transition>

  </div>
</template>

<script>
export default {

  name: 'Test',
  data: function () {
    return {
      isShow: false
    }
  },

  methods: {
    showDiv (flag) {
      this.isShow = flag
    }
  }

}
</script>

<style lang="stylus" scoped>
.container {
  text-align: center;
}

// 阴影区
.shadow {
  touch-action: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// 内容区
.show-content {
  touch-action: none;
  background-color: #fff;
  border-radius: 20px;
  width: 90%;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn {
  margin-top: 0.2rem;
}
</style>

4.效果图：