Vue封装的过度与动画

transition标签

1. 标签用于包裹需要动画的元素
2. 当包裹住的元素隐藏或者显示时会自动调用

   1. 显示动画：v-enter-active

   2. 隐藏动画：.v-leave-active

3. 示例

   <template>
     <div>
       <button @click="isShow = !isShow">点击切换button>
       <transition>
           <h1 v-show="isShow" style="background-color: orange">你好啊！！！h1>
       transition>
     div>
   template>
    
   <script>
   export default {
     name: "Test",
     data() {
       return {
         isShow: true,
       };
     },
   };
   script>
    
   <style scoped>
   .v-enter-active {
     animation: xin 1s linear;
   }
    
   .v-leave-active {
     animation: xin 1s linear reverse;
   }
    
   @keyframes xin {
     0% {
       transform: translateX(-100%);
     }
    
     100% {
       transform: translateX(0px);
     }
   }
   style>
   

4. transition的name属性能够指定动画

   1.  但是动画必须是“名称”-enter-active，或者‘名称’-enter-active

   2. 示例

      <template>
        <div>
          <button @click="isShow = !isShow">点击切换button>
          <transition name="word">
              <h1 v-show="isShow" style="background-color: orange">你好啊！！！h1>
          transition>
        div>
      template>
       
      <script>
      export default {
        name: "Test",
        data() {
          return {
            isShow: true,
          };
        },
      };
      script>
       
      <style scoped>
      .word-enter-active {
        animation: xin 1s linear;
      }
       
      .word-leave-active {
        animation: xin 1s linear reverse;
      }
       
      @keyframes xin {
        0% {
          transform: translateX(-100%);
        }
       
        100% {
          transform: translateX(0px);
        }
      }
      style>
      

5. 一开始就显示出现动画需要给transition添加appear属性

   1.    

6. transition只起到一个容器的作用，并不会出现在HTML中

7. transition与过度配合使用实现4.2

   <template>
     <div>
       <button @click="isShow = !isShow">点击切换button>
       <transition name="word" appear>
         <h1 v-show="isShow" style="background-color: orange">你好啊！！！h1>
       transition>
     div>
   template>
    
   <script>
   export default {
     name: "Test",
     data() {
       return {
         isShow: true,
       };
     },
   };
   script>
    
   <style scoped>
   /* 进入的起点，离开的终点 */
   .word-enter,
   .word-leave-to {
     transform: translateX(-100%);
   }
    
   /* 给来到和离开添加过度 */
   .word-enter-active,
   .word-leave-active {
     transition: 0.5s linear;
   }
    
   /* 进入的终点，离开的起点 */
   .word-enter-to,
   .word-leave {
     transform: translateX(0);
   }
   style>
   

transition-group标签

1. 用于多个元素使用相同的动画。
2. 必须给包含需要动画的元素key值。
3. 示例

   <template>
     <div>
       <button @click="isShow = !isShow">点击切换button>
       <transition-group name="word" appear>
         <h1 v-show="isShow" key="1" style="background-color: orange">你好啊！！！h1>
         <h1 v-show="!isShow" key="2" style="background-color: orange">你好啊！！！h1>
       transition-group>
     div>
   template>
    
   <script>
   export default {
     name: "Test",
     data() {
       return {
         isShow: true,
       };
     },
   };
   script>
    
   <style scoped>
   /* 进入的起点，离开的终点 */
   .word-enter,
   .word-leave-to {
     transform: translateX(-100%);
   }
    
   /* 给来到和离开添加过度 */
   .word-enter-active,
   .word-leave-active {
     transition: 0.5s linear;
   }
    
   /* 进入的终点，离开的起点 */
   .word-enter-to,
   .word-leave {
     transform: translateX(0);
   }
   style>
   

使用第三方集成的动画

 
<script>
 
import 'animate.css';
 
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
};
script>
 
<style scoped>
/* 进入的起点，离开的终点 */
.word-enter,
.word-leave-to {
  transform: translateX(-100%);
}
 
/* 给来到和离开添加过度 */
.word-enter-active,
.word-leave-active {
  transition: 0.5s linear;
}
 
/* 进入的终点，离开的起点 */
.word-enter-to,
.word-leave {
  transform: translateX(0);
}
style>

Vue封装的过度与动画

1. 作用：在插入，更新或者一处DOM元素时，在核实的时候给元素添加样式类名。
2. 类名与对应的作用
   1. 元素进入的样式：
      1. v-enter：进入的起点
      2. v-enter-active：进入的过程中
      3. v-enter-to：进入的终点
   2. 元素离开的样式：
      1. v-leave：进入的起点
      2. v-leave-active：进入的过程中
      3. v-leave-to：进入的终点