编程 Javascript

vue实现设置载入动画和初始化页面动画效果

Posted in Javascript onOctober 28, 2019

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

不如，加个小动画吧

原理很简单

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

css里写入动画

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

index.html

vue实现设置载入动画和初始化页面动画效果

CSS

vue实现设置载入动画和初始化页面动画效果

app.vue

vue实现设置载入动画和初始化页面动画效果

最终效果

vue实现设置载入动画和初始化页面动画效果

以上这篇vue实现设置载入动画和初始化页面动画效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vue实现设置载入动画和初始化页面动画效果

- Author -

石金泽

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JMenuTab简单使用说明

Mar 13 Javascript

JS操作select下拉框动态变动(创建/删除/获取)

Jun 02 Javascript

js Select下拉列表框进行多选、移除、交换内容的具体实现方法

Aug 13 Javascript

js实现的黑背景灰色二级导航菜单效果代码

Aug 24 Javascript

JavaScript实现的背景自动变色代码

Oct 17 Javascript

使用jQuery Rotare实现微信大转盘抽奖功能

Jun 20 Javascript

JavaScript实现横线提示输入验证码随输入验证码输入消失的方法

Sep 24 Javascript

js实现网页定位导航功能

Mar 07 Javascript

JavaScript利用fetch实现异步请求的方法实例

Jul 26 Javascript

微信小程序时间戳转日期的详解

Apr 30 Javascript

详解将微信小程序接口Promise化并使用async函数

Aug 05 Javascript

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

Jan 21 Javascript

vue设置一开始进入的页面教程

Oct 28 #Javascript

Vue调用后端java接口的实例代码

Oct 28 #Javascript

原生js实现商品筛选功能

Oct 28 #Javascript

使用Vue实现调用接口加载页面初始数据

Oct 28 #Javascript

JavaScript制作3D旋转相册

Aug 02 #Javascript

微信小程序工具函数封装

Oct 28 #Javascript

js实现3D照片墙效果

Oct 28 #Javascript

模型保存加载(1) 人工智能(2) FuzzyWuzzy(1) 图像处理(1) 模糊匹配(1) moviepy(1) PyTorch(1) Pyecharts(7) opencv(7) 井字棋(1)

You might like

PHP 中关于ord($str)&gt;0x80的详细说明

2012/09/23 PHP

[原创]smarty简单模板变量输出方法

2016/07/09 PHP

PHP面向对象程序设计组合模式与装饰模式详解

2016/12/02 PHP

YII2 实现多语言配置的方法分享

2017/01/11 PHP

PHP回调函数概念与用法实例分析

2017/11/03 PHP

Thinkphp5.0 框架Model模型简单用法分析

2019/10/11 PHP

js资料toString 方法

2007/03/13 Javascript

定义select的边框颜色

2008/04/28 Javascript

jQuery拖拽div实现思路

2014/02/19 Javascript

javascript结合CSS实现苹果开关按钮特效

2015/04/07 Javascript

JavaScript实现的背景自动变色代码

2015/10/17 Javascript

javascript for-in有序遍历json数据并探讨各个浏览器差异

2015/11/30 Javascript

jQuery实现的指纹扫描效果实例(附演示与demo源码下载)

2016/01/26 Javascript

jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】

2017/03/21 jQuery

Angular 4环境准备与Angular cli创建项目详解

2017/05/27 Javascript

package.json文件配置详解

2017/06/15 Javascript

react.js使用webpack搭配环境的入门教程

2017/08/14 Javascript

nodejs socket服务端和客户端简单通信功能

2017/09/14 NodeJs

vue中实现滚动加载更多的示例

2017/11/08 Javascript

layui清除radio的选中状态实例

2019/11/14 Javascript

浅谈vue-props的default写不写有什么区别

2020/08/09 Javascript

python 提取文件的小程序

2009/07/29 Python

Python使用random和tertools模块解一些经典概率问题

2015/01/28 Python

详解使用 pyenv 管理多个版本 python 环境

2017/10/19 Python

解决Shell执行python文件,传参空格引起的问题

2018/10/30 Python

基于python实现把图片转换成素描

2019/11/13 Python

Python用input输入列表的实例代码

2020/02/07 Python

基于python实现复制文件并重命名

2020/09/16 Python

10个python爬虫入门实例(小结)

2020/11/01 Python

HTML5 canvas基本绘图之绘制五角星

2016/06/27 HTML / CSS

心理健康教育制度

2014/01/27 职场文书

乡镇遵守党的政治纪律情况对照检查材料

2014/09/26 职场文书

2014年会计人员工作总结

2014/12/10 职场文书

自荐信格式模板

2015/03/27 职场文书

2019年公司卫生管理制度样本

2019/08/21 职场文书

python urllib库的使用详解

2021/04/13 Python