Vue的动画与过度

最新推荐文章于 2025-05-15 18:28:47 发布

原创最新推荐文章于 2025-05-15 18:28:47 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

70 篇文章

订阅专栏

本文围绕Vue的动画和过渡效果展开。介绍了编写CSS关键帧动画、定义动画效果及在模板中使用的方法，还提及动画的name和appear属性。阐述了过渡效果的六个过程，说明了多个元素过渡时使用transition - group标签的要点，最后讲解了集成animate.css第三方动画库的步骤。

一、Vue的动画效果

（一）编写CSS关键帧动画

@keyframes show{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}

（二）定义动画效果

.v-enter-active { animation: 配置项 } // 显示动画

.v-leave-active { animation: 配置项 } // 隐藏动画

.v-enter-active{
    animation: show 0.5s;
}

.v-leave-active {
    animation: show 0.5s reverse;
}

@keyframes show{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}

（三）在模板中使用效果

<transition> 动画对象 </transition>

（四）动画的属性

我们能够在上面的transition标签中添加一些属性

1. name属性

该属性主要是解决添加多个动画的情况，如果全部都是v-xxx-active，样式就很单一。

因此我们可以给transition标签设置name属性，来标识动画对象。

<transition name="名称"> 动画对象 </transition>

// style样式

.名称-enter-active { animation: 配置项 } // 显示动画

.名称-leave-active { animation: 配置项 } // 隐藏动画

2. appear属性

如果我们想让页面一加载的时候就触发一次动画，就可以使用appear属性：

<transition appear> 动画对象 </transition>

二、 Vue的过度效果

过度效果分为六个过程：

进入的起点，进入的过程，进入的终点

离开的起点，离开的过程，离开的终点

这里进入的过程和离开的过程就是上面的v-enter-active和v-leave-active。

.v-enter // 进入的起点

.v-enter-to // 进入的终点

.v-leave // 离开的起点

.v-leave-to // 离开的终点

很多时候进入的起点就是离开的终点，离开的起点就是进入的终点：

这里的hello-xxx-xxx是给transition设置了name="hello"

/* 进入的起点，离开的终点 */
.hello-enter, .hello-leave-to {
    transform: translateX(-100%);
}

.hello-enter-active, .hello-leave-active {
    transition: transform 0.5s;
}

/* 进入的终点，离开的起点 */
.hello-enter-to, .hello-leave {
    transform: translateX(0);
}