VUE transition 组件过度效果分析

最新推荐文章于 2024-04-15 16:31:02 发布

半点闲

最新推荐文章于 2024-04-15 16:31:02 发布

阅读量328

点赞数

分类专栏：其它文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/cg_i/article/details/125674856

版权

其它专栏收录该内容

15 篇文章

订阅专栏

VUE transition 组件过度效果分析

作者：高玉涵
时间：2022.7.8 9:58
博客：blog.youkuaiyun.com/cg_i

过渡效果

Vue.js 在插入、更新或者移除 DOM 时，提供了多种不同方式的应用过渡效果，包括以下工具：

在 CSS 过渡和动画中自动应用 class；
可以配合使用第三方 CSS 动画库，如 Animate.css；
在过渡钩子函数中使用 JavaScript 直接操作 DOM；
可以配合使用第三方 JavaScript 动画库，如 Velocity.js。

Vue.js 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 -entering/leaving 过度。

条件渲染（使用 v-if ）；
条件展示（使用 v-show）；
动态组件；
组件根节点；

简单来说，可以在用户进行操作或者和页面元素进行交互时，提供良好且适当的用户体验效果。

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="vue.js"></script>
        <!-- CSS 设置过渡效果 -->
        <style>
            .fade-enter-active, .fade-leave-active{
                transition: opacity .5s
            }
            .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
                opacity: 0;
            }
        </style>
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- 在节点中定义 click 方法-->
            <button v-on:click="show = !show">
                click
            </button>
            <!-- 效果显示部分-->
            <transition name="fade">
                <p v-if="show">hello Vue</p>
            </transition>
        </div>
        <script>
            var app=new Vue({
                el: '#app',
                data: {
                    show: true
                }
            })
        </script>
    </body>
</html>

使用方法

对需要添加动画效果的内容外部包裹一个 <transition>标签，并编写相应的 CSS 样式。

<!-- CSS 样式-->
<style>
    .fade-enter-active, 
    .fade-leave-active{
    transition: opacity .5s
}
.fade-enter, 
.fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0;
}
<!-- 效果显示部分-->
<transition name="fade">
    <p v-if="show">hello Vue</p>
</transition>

name 属性

name：string，用于自动生成 CSS 过度类名前缀。例如：name=‘fade’ 将自动拓展为 .fade-enter, .fade-enter-active 等。默认类名前缀为 “v-”。

appear 属性

apper：boolean，是否在初始渲染时使用过渡。默认为 false。

过渡动画原理分析

在进入过渡中，会有 3 个class 的切换：

fade-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
fade-enter-actvie：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
fade-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时 fade-enter 被移除），在过渡/动画完成之后移除。

在离开的过渡中，也会有 3 个 class 切换：

fade-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
fade-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开的过程时间，延迟和曲线函数。
fade-leave-to：2.1.8 版及以上定义离开过渡的线束状态。在离开过渡被触发之后下一帧生效（与此同时 fade-leave 被删除）在过渡/动画完成之后移除。