动画效果被阻塞，什么原因造成的

Question

问题描述

在使用axios请求之前，让loading显示出来，请求得到相应数据渲染后，让loading隐藏，但是显示时动画不完整，
待请求到结果后才正常显示动画

问题出现的环境背景及自己尝试过哪些方法

vue+axios+element-ui ，没有引入element-ui的css,引入后再以服务的方式使用Loading组件,还是显示不出完整的动画效果

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

getData() {
                this.$nextTick(() => {
                    const loadingBox = document.querySelector('.loading-box');
                    loadingBox.style.display = 'block';
                    /*this.$loading({
                        text: 'loading...',
                        target: '.loading-box'
                    })*/
                })
                this.$axios.get(
                    '/k3',
                    {
                        params:{
                            recent: this.$route.query.recent ? this.$route.query.recent : 50
                        }
                    }
                )
                .then( res => {
                ...
                
                

你期待的结果是什么？实际看到的错误信息又是什么？

是什么原因造成动画显示不完整的呢？

Answer 1

用element还自己写loading干啥，v-loading不够香吗