vue初始化动画加载的实例

2024-09-30 05:41:16

1.在入口文件index.html中加入loading动画：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <!--浏览器兼容模式用最新的文档渲染模式-->
  <meta http-equiv="X-UA-Compatible" content ="IE=edge"/>
  <title></title>
  <style type="text/css">
   #Loading {
    top:50%;
    left:50%;
    position: absolute;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index:100;
   }
   @-webkit-keyframes ball-beat {
    50% {
     opacity: 0.2;
     -webkit-transform: scale(0.75);
     transform: scale(0.75); }

    100% {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1); } }

   @keyframes ball-beat {
    50% {
     opacity: 0.2;
     -webkit-transform: scale(0.75);
     transform: scale(0.75); }

    100% {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1); } }

   .ball-beat > div {
    background-color: #279fcf;
    width: 15px;
    height: 15px;
    border-radius: 100% !important;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: ball-beat 0.7s 0s infinite linear;
    animation: ball-beat 0.7s 0s infinite linear; }
   .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: 0.35s !important;
    animation-delay: 0.35s !important; }
  </style>

 </head>
 <body>
  <div id="Loading">
   <div class="loader-inner ball-beat">
    <div></div>
    <div></div>
    <div></div>
   </div>
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

2.在app.vue的created方法中：

created() { document.body.removeChild(document.getElementById('Loading'))
}

效果如下：

以上这篇vue初始化动画加载的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

移动端页面载入时过长的白屏等待,总是让人心烦气躁不如,加个小动画吧原理很简单在index.html页面的body插入一个div css里写入动画在app.vue里 created的时候将这个div移除就ok了 index.html CSS app.vue 最终效果以上这篇vue实现设置载入动画和初始化页面动画效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
vue中组件的过渡动画及实现代码

1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click=&q
vue实现页面加载动画效果

我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu
Vue页面跳转动画效果的实现方法

前言现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现
vue实现app页面切换动画效果实例

因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({
vue初始化动画加载的实例

1.在入口文件index.html中加入loading动画: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta content="width=device-width, initial-sca
vue自定义正在加载动画的例子

如下所示: loadingTimer(){ clearInterval(this.$el.loading_timer); const rotate_angle=30,speed=90; this.$el.loading_timer=setInterval(()=>{ const rotate_el=this.$el.querySelector('.rotate'); /*获得当前元素是transform值*/ let origin_angle=rotate_el.style.transform;
MUI 上拉刷新/下拉加载功能实例代码

新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/  <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> &l
Vue实现无限加载瀑布流

本文实例为大家分享了Vue实现无限加载瀑布流的具体代码,供大家参考,具体内容如下我做的这个瀑布流放在了一个嵌套页面里,就是类似管理后台的main content中,如果要改成全屏的也很方便,其实更容易些,因为会避开一些在元素上使用onScroll的坑. 通过这个瀑布流,可以掌握以下几个知识点: 1.在元素上监听scroll事件,相对直接在window上监听麻烦一点点: 2.image.onload事件: 3.promiseAll; 4.vue 的 transition-group 这里使用了m
Vue SSR 组件加载问题

Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return
Vue 无限滚动加载指令实现方法

也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结果就是0. 一.获取滚动条位置 class Scroll { static get top() { return Math.max(document.documentElement.scrollTop || document.body.scrollTop); } static get clientH
vue.js页面加载执行created,mounted的先后顺序说明

created页面加载未渲染html之前执行. mounted渲染html后再执行. 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以. 补充知识:关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图,重点在于数据,拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上. 我们也都知道在Vue父子组件可以通过Props实现父组件
vue实现滚动加载的表格

实现效果码云地址滚动加载知识储备参考ant-design-vue中list滚动加载的思路,使用vue-infinite-scroll加上vue-virtual-scroller作为解决方案. 组件封装因为整个系统使用的框架是ant-dsign-vue,所以组件封装的变量命名风格尽可能的与a-table保持一致. 1. 组件命名 XScrollTable.vue 2. 提供的props 必填字段: dataSource -- 数据源 columns -- 表格展示的列信息,插槽用法和a-t
Vue之文件加载执行全流程

目录 Vue项目结构主要配置文件 Vue项目启动代码执行流程分析 Vue加载时文件的执行顺序 Vue内部页面的执行顺序总结 Vue项目结构使用webpack构建的Vue项目的结构如下所示: 主要配置文件 1.package.json package.json是一个json文件,这是vue项目的表述文件. package.json定义了项目所需要的各种模块,以及项目的配置信息(名称.版本.许可证等),npm install命令也是根据这个配置文件自动下载项目所需的模块. { "name&qu
mui上拉加载功能实例详解

最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com

vue初始化动画加载的实例

相关推荐

随机推荐