vue设置载入动画、初始化页面动画

移动端页面载入时过长的白屏等待,总是让人心烦气躁

不如,加个小动画吧

原理很简单

在index.html页面的body插入一个div

css里写入动画

在app.vue里 created的时候 将这个div移除就ok了

index.html

1.png

CSS

2.png

app.vue

如果你只是想放在首页,则编辑Home.vue


aa.png

效果如下

bbb.gif

代码

自动销毁

created(){
let loading=document.getElementById('loading')
if (loading != null){document.body.removeChild(loading)}
}

指定时间(5秒)

   created(){
            setTimeout(function () {
                let animation = document.getElementById('animation')
                if (animation != null) { document.body.removeChild(animation); }
            }, 5 * 1000);
        }   
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动端页面载入时过长的白屏等待,总是让人心烦气躁 不如,加个小动画吧 原理很简单 在index.html页面的bo...
    六神丶阅读 3,071评论 2 3
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,989评论 1 4
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,611评论 0 7
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,905评论 6 16
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,281评论 1 22