Vue学习第18天——Vue中的过度与动画效果的使用与案例

一、过度与动画

1、原理

自动监测目标元素是否应用了 CSS 过渡或动画，如果是，在合适的时候给元素添加或删除 CSS 类名

2、标签

Vue 提供了 transition标签，来处理过渡以及动画

3、使用场景

只有DOM切换显示与隐藏，可以使用vue的过渡或动画
在下列情形中，可以给元素或组件添加进入/离开过渡
条件渲染(v-if)
条件展示(v-show)
动态组件
组件的根节点

二、使用方法

1、准备样式

① 过度样式
元素进入的样式
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
② 动画样式
定义动画
@keyframes 动画名 { ... }
使用动画
v-enter-active：进入过程中的动画
v-leave-active：离开过程中的动画

2、使用<transition>包裹要过度的元素

<transition>要过添加过度或动画的元素</transiton>

三、过度效果案例

需求：点击按钮显示与隐藏H3元素

<template>
  <div>
    <button @click="changeShow">显示与隐藏</button>
    <transition>
      <h3 v-show="isShow">你好，小猫咪</h3>
    </transition>
  </div>
</template>

<script>
export default {
  name:"Demo",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    changeShow(){
      this.isShow=!this.isShow
    }
  }
}
</script>

<style>
  /* 进入的起点，结束的重点 */
  .v-enter,.v-leave-to {
    transform: translateX(-100px);
  }
  /* 进入过程中与离开过程中 */
  .v-enter-active,.v-leave-active {
    transition: all 0.5s linear;
  }
  /* 进入的终点，离开的起点 */
  .v-enter-to,.v-leave {
    transform: translateX(0);
  }
</style>

运行结果

四、动画效果案例

需求：点击按钮显示与隐藏H3元素

<template>
  <div>
    <button @click="changeShow">显示与隐藏</button>
    <transition>
      <h3 v-show="isShow">你好，小猫咪</h3>
    </transition>
  </div>
</template>

<script>
export default {
  name:"Animation",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    changeShow(){
      this.isShow=!this.isShow
    }
  }
}
</script>

<style>
    /* 进入过程的动画 */
   .v-enter-active {
      animation: demo 0.5s linear;
   }
   /* 离开过程的动画 */
   .v-leave-active {
      animation: demo 0.5s linear reverse;
   }
   /* 定义动画 */
  @keyframes demo {
    0% {
      transform: translateX(-100%);
    };
    100%{
      transform: translateX(0);
    }
  }
</style>

运行结果

五、进阶知识

1、有多个元素需要过度/动画

需要使用<transition-group>，且每个元素都要指定key值

<transition-group>
	<h3 v-show="isShow" key="1">你好，小猫咪</h3>
	<h3 v-show="isShow" key="2">你好，小猫咪</h3>
</transition-group>

不加key值，控制台报错，并且页面过度/动画效果不渲染

2、为过度/动画添加名称

当效果没有名称时，样式用v-表示
使用name属性为其添加名称，样式为名称-

<transition name='demo'></transition>

样式指令

.demo-enter-active, .demo-leave-active {
  transition: all 0.5s linear;
}

3、页面初始化就有过度/动画效果

使用apper属性实现元素一渲染到页面就有动画效果

<transition :apper:"true"></transition>
<!-- 或者 -->
<transition apper></transition>

六、第三方库

animate.css实现动画效果
animate.css详解：链接: Vue使用第三方库实现动画效果：animate.css使用方法和教程案例