vue.js页面加载数据时加载动画过渡效果

原创已于 2022-04-22 09:37:16 修改 · 2.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-04-21 10:00:29 首次发布

Vue 专栏收录该内容

198 篇文章

订阅专栏

本文详细介绍如何在Vue项目中创建和使用加载组件，包括.vue文件的结构、样式设置、过渡效果的实现，以及如何通过数据请求控制组件显示与隐藏。

创建组件

新建 .vue 文件： src/components/laoding/laoding.vue

<template>
    <div class="loading"></div>
</template>

<script>

export default {
    name: 'Loading' // 定义的组件名称 使用时写法：loading
}

</script>

<style scoped>

.loading {
    position: fixed;
    left: 0;
    top: 0;
    background: url('~@/assets/images/loading-ball.svg') center center no-repeat #fff;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

</style>

使用组件

原理：

通过自定义一个变量 isLoading 初始化为 true ，在数据请求成功之后将变量改为 false ，在 template 中通过变量来控制是否显示隐藏，使用 vue 自带的过渡效果增加用户体验

需要在全局的 css 中加入过渡需要的样式

.fade-enter,
    .fade-leave-active {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.vue 文件使用代码示例片段

<template>
    <div>
        <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition>
    </div>
</template>

<script>

import Loading from '@/components/loading'
export default{
    components:{ Loading },

    data(){
       return{
           isLoading: true
       }
    },

    mounted() {
        const that = this

        // 初始化页面数据
        that.loadPageData()
    },

    methosd:{
        loadPageData: function() {
        // axios 请求页面数据 .then 中将状态值修改 this.isLoading = false
        },
    }
}

<script>