Vue封装的过度与动画

Vue封装的过度与动画

1:知识点：

## Vue封装的过度与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />

3. 写法：

   1. 准备好样式：

      - 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      - 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

   2. 使用```<transition>```包裹要过度的元素，并配置name属性：

      ```vue
      <transition name="hello">
      	<h1 v-show="isShow">你好啊！</h1>
      </transition>
      ```

   3. 备注：若有多个元素需要过度，则需要使用：```<transition-group>```，且每个元素都要指定```key```值。

2、界面效果

3、代码说明：

3-1、代码结构：

3-2、main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;

// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App),
        //添加全局事件总线对象
        beforeCreate(){
             Vue.prototype.$bus=this;
        }
   });

3-3、App.vue

<template>
  <div id="root">
    <hr>
    <span>Test</span>
    <Test />

    <hr>
    <span>Test1</span>
    <Test1 />
    <hr>
    <span>Test2</span>
    <Test2 />
    <hr>
    <span>Test3</span>
    <Test3 />
  </div>
</template>

<script>
    import Test from './components/Test.vue';
    import Test1 from './components/Test1.vue';
    import Test2 from './components/Test2.vue';
    import Test3 from './components/Test3.vue';

    export default {
      name: 'App',
      components: { Test,Test1,Test2,Test3   }
    }
</script>

3-4、Test.vue

<<template>
  <div  >
        <button @click="isShow = !isShow " x>显示/隐藏</button>  <!-- x 该段代码表示：界面加载后就显示动画效果  或者： ：x="true"-->
        <!--transition 里面只能使用1个元素    transition-group 里面可以使用一组（多个）元素 -->
        <transition name="hello"  appear   mode="">    <!--:appear="true"  该段代码表示：界面加载后就显示动画效果  或者: appear -->
            <h1 v-show="isShow"   > 你好啊 ！</h1>
        </transition>
  </div>
</template>

<script>
export default {
/* 组件名 */
  name: 'Test',
/* mixin(混入)  */
  mixins: [],
/* 配置声明子组件  */
  components: {},
/* 组件间数据、方法传值接收区  */
  props: [],
/* 数据对象：数据赋值声明  */
  data () {
    return {
         isShow:true
    }

  },
/* 计算属性：计算区  */
  computed: {},
/* 检测区  */
  watch: {},
/*   */
  created () {},
/*  挂载区 */
  mounted () {},
/*  方法区 */
  methods: {}
}
</script>

<style scoped lang="less">
   h1{
       background-color:orange;
    }

    // 切入动画 1秒钟
    .hello-enter-active{
         animation: moveVide 0.5s linear ;
    }
    // 切出动画
    .hello-leave-active{
        animation: moveVide 0.5s linear  reverse;

    }

    // 定义动画事件
    @keyframes moveVide{
        from {
            transform:translateX(-100%);
        }
        to{
            transform:translateX(0px);
        }


    }

</style>

3-5、Test1.vue

<<template>
  <div  >
        <button @click="isShow = !isShow " x>显示/隐藏</button>  <!-- x 该段代码表示：界面加载后就显示动画效果  或者： ：x="true"-->
        <!--transition 里面只能使用1个元素    transition-group 里面可以使用一组（多个）元素 -->
        <transition-group name="hello"  appear   mode="">    <!--:appear="true"  该段代码表示：界面加载后就显示动画效果  或者: appear -->
            <h1 v-show="isShow"  key="1"> 你好啊 ！</h1>
            <h1 v-show="isShow"  key="2"> Vue 世界 ！</h1>
        </transition-group>
  </div>
</template>

<script>
export default {
/* 组件名 */
  name: 'Test1',
/* mixin(混入)  */
  mixins: [],
/* 配置声明子组件  */
  components: {},
/* 组件间数据、方法传值接收区  */
  props: [],
/* 数据对象：数据赋值声明  */
  data () {
    return {
         isShow:true
    }

  },
/* 计算属性：计算区  */
  computed: {},
/* 检测区  */
  watch: {},
/*   */
  created () {},
/*  挂载区 */
  mounted () {},
/*  方法区 */
  methods: {}
}
</script>

<style scoped lang="less">
   h1{
       background-color:orange;
    }

    // 切入动画 1秒钟
    .hello-enter-active{
         animation: moveVide 0.5s linear ;
    }
    // 切出动画
    .hello-leave-active{
        animation: moveVide 0.5s linear  reverse;

    }

    // 定义动画事件
    @keyframes moveVide{
        from {
            transform:translateX(-100%);
        }
        to{
            transform:translateX(0px);
        }


    }

</style>

3-6、Test2.vue

<<template>
  <div  >
        <button @click="isShow = !isShow " x>显示/隐藏</button>  <!-- x 该段代码表示：界面加载后就显示动画效果  或者： ：x="true"-->
        <!--transition 里面只能使用1个元素    transition-group 里面可以使用一组（多个）元素 -->
        <transition name="hello"  appear   mode="">    <!--:appear="true"  该段代码表示：界面加载后就显示动画效果  或者: appear -->
            <h1 v-show="isShow"  key="1"> 你好啊 ！</h1>
        </transition>
  </div>
</template>

<script>
export default {
/* 组件名 */
  name: 'Test2',
/* mixin(混入)  */
  mixins: [],
/* 配置声明子组件  */
  components: {},
/* 组件间数据、方法传值接收区  */
  props: [],
/* 数据对象：数据赋值声明  */
  data () {
    return {
         isShow:true
    }

  },
/* 计算属性：计算区  */
  computed: {},
/* 检测区  */
  watch: {},
/*   */
  created () {},
/*  挂载区 */
  mounted () {},
/*  方法区 */
  methods: {}
}
</script>

<style scoped lang="less">
   h1{
       background-color:orange;
      }

    // 切入动画  进入的起点  , 切出动画  离开的终点
    .hello-enter,.hello-leave-to{
      animation: translateX(-100%) ;
    }
    .hello-enter-active,.hello-leaver-active{
      transition: 0.5s linear ;
    }
    // 切入动画  进入的终点  ,切出动画  离开的起点
    .hello-enter-to , .hello-leave {
         animation:  translateX(0);
    }


</style>

3-7、Test3.vue

<!--
   引入 css 动画类库： animate.style


 -->
<<template>
  <div  >
        <button @click="isShow = !isShow " x>显示/隐藏</button>  <!-- x 该段代码表示：界面加载后就显示动画效果  或者： ：x="true"-->
        <!--transition 里面只能使用1个元素    transition-group 里面可以使用一组（多个）元素 -->
        <transition-group
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"

        >    <!--:appear="true"  该段代码表示：界面加载后就显示动画效果  或者: appear -->
            <h1 v-show="!isShow"  key="1"> 你好啊 ！</h1>
            <h1 v-show="isShow"  key="2"> Vue 世界 ！</h1>
        </transition-group>
  </div>
</template>

<script>
    // 引入CSS 样式库
    import 'animate.css'

    export default {
    /* 组件名 */
      name: 'Test3',
    /* mixin(混入)  */
      mixins: [],
    /* 配置声明子组件  */
      components: {},
    /* 组件间数据、方法传值接收区  */
      props: [],
    /* 数据对象：数据赋值声明  */
      data () {
        return {
            isShow:true
        }

      },
    /* 计算属性：计算区  */
      computed: {},
    /* 检测区  */
      watch: {},
    /*   */
      created () {},
    /*  挂载区 */
      mounted () {},
    /*  方法区 */
      methods: {}
    }
</script>

<style scoped lang="less">
   h1{
       background-color:orange;
    }


</style>
<!--
   /**
      安装 animate.css

            npm install animate.css


            PS E:\Vue_demo\VueCli\vue_test> npm install animate.css

            added 1 package in 14s
            PS E:\Vue_demo\VueCli\vue_test>

    **/
 -->

---