Vue 转场动画封装

** 基础使用**
动画的基础封装 （适用移动端）
1. 创建 一个 公共组件

<template>
  <transition>
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: "zhuanAn",
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style lang="stylus" scoped>
.v-enter,.v-leave-to
    opacity :0
    transition : opacity  2s
.v-enter-active,.v-leave-active
    transition : opacity  2s
</style>

2. 在需要的组件中导入即可

// 专场动画引入
import zhuanAn from "../zhuanAn";

3. 注册

components: {  zhuanAn },

4 使用

<zhuanAn>
        <Imgs :imgsn="imgsn" v-show="show" @chuan1="chuan1" />
 </zhuanAn>