vue.js 过渡和动画

2024-04-09 18:31:11

Vue 在插入、更新或者移除 DOM 时，动态添加css类名来达到想要的动画效果

1.transition标签

给元素包裹一个transition标签，并设置name属性的值，这个值可以随意设置，但是他会决定Dom更新时自动添加的css类名

这里name="xxx"作为演示

<div id="app">
    <button @click="isShow = !isShow">点我切换显示隐藏</button>
    <transition name="xxx">
        <p v-show="isShow">{{msg}}</p>
    </transition>
</div>

(1)当点击按钮，将p元素由显示切换成隐藏时，p元素添加2个css类：

<p class="xxx-leave-active xxx-leave-to">vue动画效果</p>

当p元素完全隐藏时，将移除相应的css类

<p class="" style="display: none;">vue动画效果</p>

(2)再次点击按钮，将p元素由隐藏切换成显示时，p元素添加2个css类：

<p class="xxx-enter-active xxx-enter-to" style="">vue动画效果</p>

当p元素完全显示时，将移除相应的css类

<p class="" style="">vue动画效果</p>

(3)xxx-enter和xxx-leave设定的样式会在元素切换开始的瞬间生效。（虽然在dom中的class属性里面看不见这2个类）通俗的说，这2个类给过渡提供了起始属性值，而xxx-enter-to和xxx-leave-to提供了结束属性值，以便计算过渡效果

(4)v-show/v-if的效果要等过渡和动画结束之后才生效

2.设置css类的属性

前面的例子说明，当元素切换时会添加4个css类，需要为这些css类设置具体的属性才能看到效果

<style>
    .xxx-enter-active,.xxx-leave-active{
        /* 设定过渡效果 */
        transition: all 10s;
    }
    /* 显示 */
    .xxx-enter{
        /* 过渡的起始效果 */
        opacity: 0;
    }
    .xxx-enter-to{
        /* 过渡的结束效果 */
        opacity: 1;
    }
    /* 隐藏 */
    .xxx-leave{
        /* 过渡的起始效果 */
        opacity: 1;
    }
    .xxx-leave-to{
        /* 过渡的结束效果 */
        opacity: 0;
    }
</style>

可以简写成：

<style>
    .xxx-enter-active,.xxx-leave-active{
        /* 设定过渡效果 */
        transition: all 10s;
    }
    .xxx-enter,.xxx-leave-to{
        opacity: 0;
    }
    .xxx-enter-to,.xxx-leave{
        opacity: 1;
    }
</style

PS:一般都是在元素显示或者隐藏的过程中的类名加入过渡样式，在元素刚进入动画时和结束动画时设定开始的样式属性值和结束样式属性值

3.动画

(1)注册动画

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

(2)为目标元素包裹transition标签，并设置name属性的值

<div id="app">
    <button @click="isShow = !isShow">点我切换显示隐藏</button>
    <br>
    <transition name="xxx">
        <!-- 设定成行内块级元素，方便控制元素大小 -->
        <p v-show="isShow" style="display: inline-block">{{msg}}</p>
    </transition>
</div>

(3)设置css类的属性

.xxx-enter-to,.xxx-leave-to{
    /* 调用动画 */
    nimation: bounce-in 10s;
}
.xxx-enter,.xxx-leave{
    /* 添加起始效果，适应动画的第一帧 */
    transform: scale(0);
}

4.自定义类名

如果不想使用vue定义的类名，而是使用自己或者第三方已经定义好的类名，可以在transition标签中通过下面的属性指定相应的类名：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

基本使用：

//这里用到第三方的类名
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

//name属性可以不写
<transition 
name=""
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>

animate.css预置了很多css类，可以在官网选择想要的类并查看相应的动画效果，不过记得要添加基本类animated

5.多个元素过渡

(1)transition标签渲染后内部只能有一个子元素，所以当要对多个元素进行切换时只能使用v-if而不能使用v-show
(2)当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它

<transition name="xxx">
    <li v-if="index===0" key="1">
        <h1>第一屏</h1>
    </li>
    <li v-else key="2">
        <h1>第二屏</h1>
    </li>
</transition>

<style>
    .xxx-enter-active,.xxx-leave-active{
        transition: all 10s;
    }
    .xxx-enter{
        transform: translateX(100%);
    }
    .xxx-leave-to{
        transform: translateX(-100%);
    }
</style>

6.过渡模式 mode

对于上面2个元素切换时,默认情况下。元素进入和元素离开同时发生，会出现两个元素同时出现在页面的情形。可以通过修改mode属性来成其他效果。
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<transition name="xxx"  mode="out-in">
    <li v-if="index===0" key="1">
        <h1>第一屏</h1>
    </li>
    <li v-else key="2">
        <h1>第二屏</h1>
    </li>
</transition>

默认效果：

out-in:先出后进

in-out:先进后出

7.钩子函数

可以在transition标签中通过属性中声明 JavaScript 钩子:

码农公寓