Vue封装的过度与动画

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

 

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

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

:appear="true" 等同于 appear ，代表页面一加载动画就执行一次。

效果展示一：

知识点回顾

动画

• 通过 @keyframes 定义动画

• 在指定元素⾥，通过 animation 属性调⽤动画

 定义动画

@keyframes 定义动画关键帧，写法：

• 百分比 0% 是动画的开始时间，100% 动画的结束时间
• 关键词 "from" 和 "to"，等价于 0% 和 100%

  /* 动画名不要使⽤ none 这样的关键字 */ 
  @keyframes 动画名{
      from{ 初始帧 } 
      to{ 结束帧 } 
  }
  ​
  @keyframes mymove
  {
      0% {top:0px; background:red; width:100px;}
      100% {top:200px; background:yellow; width:300px;}
  }
  

调用动画（animation 属性的用法）

animation: 定义的动画名称 动画完成时间(从开始帧到结束帧⼀次动画完成的时间) 运动曲线 延迟执⾏ 执⾏次数(infinite 表示⽆限次) 是否反向

animation-name 定义的动画名称（必填）

animation-duration 多长时间才能完成动画（必填）

animation-timing-function 动画的速度曲线

• ease 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear 规定从开始到结束的速度相同的动画
• ease-in 规定慢速开始的动画
• ease-out 规定慢速结束的动画
• ease-in-out 指定开始和结束较慢的动画
• cubic-bezier(n,n,n,n) 运行您在三次贝塞尔函数中定义自己的值

animation-delay 动画开始的延迟时间，负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒

• 可以通过帧控制，实现延迟。但每次动画都会有延迟，animation-delay 只体现在第⼀次动画开始时

animation-iteration-count 设置动画应运行多少次

animation-direction 向前播放、向后播放还是交替播放动画

• normal 动画正常播放（向前 默认值）
• reverse 动画以反方向播放（向后）
• alternate 动画先向前播放，然后向后
• alternate-reverse 动画先向后播放，然后向前
• alternate 也会计算执⾏次数

animation: myfirst 5s linear 0s infinite alternate;

animation-fill-mode 动画开始结束时盒⼦的状态

• none (默认值) 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后⽣效
• forwards 在运动结束的之后，停到结束位置
• backwards 在延迟的情况下，让 0% 在延迟前⽣效
• both backwards和forwards同时⽣效

animation-play-state 设置动画正在运行还是暂停

• paused 动画已暂停
• running 动画正在播放

代码实现（test.vue）

<template>
    <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
        <!--使用<transition>包裹要过度的元素，并配置name属性-->  
        <transition name="hello" appear>
        <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<script>
export default {
    name:'Test',
    data(){
        return{
            isShow:true
        }
    }
}
</script>

<style>
    h1{
        background-color: orange;
    }
    .hello-enter-active{
        animation: atguigu 0.5s linear;
    }
    .hello-leave-active{
        animation: atguigu 0.5s linear reverse;
    }
    @keyframes atguigu{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

效果展示二：（与效果展示一一样的效果，只不过这个是两个都有动画效果）

知识点回顾

元素进入的样式

1. v-enter：进入的起点

2. v-enter-active：进入过程中

3. v-enter-to：进入的终点

元素离开的样式

1. v-leave：离开的起点

2. v-leave-active：离开过程中

3. v-leave-to：离开的终点

代码实现（test2.vue）

<template>
    <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
        <!--若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值-->
        <transition-group name="atguigu" appear>
        <h1 v-show="isShow" key="1">你好啊！！</h1>
        <h1 v-show="isShow" key="2">尚硅谷</h1>
        </transition-group>
    </div>
</template>

<script>
export default {
    name:'Test2',
    data(){
        return{
            isShow:true
        }
    }
}
</script>

<style>
    h1{
        background-color: orange;
        /* transition: 0.5s linear; */
    }
    /* 进入的起点，离开的终点 */
    .atguigu-enter,.atguigu-leave-to{
        transform: translateX(-100%);
    }
    .atguigu-enter-active,.atguigu-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点,离开的起点 */
    .atguigu-enter-to，.atguigu-leave{
        transform: translateX(0px);
    }
</style>

效果展示三：

 知识点回顾

Animate.css 基本使用

• 安装 npm install animate.css
• 引用 import 'animate.css'

第三方库网址：Animate.css | A cross-browser library of CSS animations. 

注意：引入的时候注意前缀animate__ ；其中那些类名都是去网站上复制粘贴上就能用的

代码实现（test3.vue）

<template>
    <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
        <!-- 在需要使用Animate.css，引入，注意前缀animate__ -->
        <transition-group 
           name="animate__animated animate__bounce" 
           appear
           enter-active-class="animate__swing"
           leave-active-class="animate__backOutUp"
        >
        <h1 v-show="isShow" key="1">你好啊！！</h1>
        <h1 v-show="isShow" key="2">尚硅谷</h1>
        </transition-group>
    </div>
</template>

<script>
//引入
import 'animate.css'
export default {
    name:'Test3',
    data(){
        return{
            isShow:true
        }
    }
}
</script>

<style>
    h1{
        background-color: orange;
    }
</style>