vue首屏加载动画,vue可以做动画效果吗
这篇文章主要为大家详细介绍了某视频剪辑软件手写加载动画项目，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在页面没有响应时，展示加载动画是一种对用户友好的表现，不至于白屏，等响应内容渲染到页面时再移除动画
先放装货效果图
原理：伪类动画，下面是步骤图，贴上助于理解，加载动画本质是设置一个定宽定高的正方形，边框半径：50%;使其成为圆形，再给该div3px的边框并设为透明，然后在单独设置上边框为白色，用：之前，之后伪类绝对的定位并进行同样设置，不同之处是依次增大留出的间隙，以及动画执行时间变长和设置延迟，这样就能形成圆圈不同快慢的旋转
完整代码：
成分文件夹下loading.vue
模板
div id=loader_wrapper
div id=loader/div
加载标题正在加载，请稍等./div
/div
/模板
脚本
导出默认值{
名称：正在加载，
}
/脚本
样式范围
#loader_wrapper{
位置：固定；
top:0；
左：0;
宽度：100%;
身高：100%;
z指数：99;
背景：rgba(0，0，0，8);
背景尺寸：100% 100%;
}
#loader{
显示：块；
位置：相对；
左：50%;
top:50%；
宽度：300像素
高度：300像素
/*背景：红色；*/
边距：-150 px 0 0-150 px；
边界半径：50%;
边框：3px纯色透明；
边框-顶部-颜色：# fff
-网络工具包-动画：自旋5s线性无限；
-ms-动画：自旋5s线性无限；
蚊子动画：自旋5s线性无限；
-o-动画：自旋5s线性无限；
动画：自旋5s线性无限；
z指数：1001;
}
#加载程序：之前{
内容："";
位置：绝对；
top:5px；
左：5px
右：5px
底部：5px
边界半径：50%;
/*背景：绿色；*/
边框：3px纯色透明；
边框-顶部-颜色：# fff
-网络工具包-动画：旋转8s线性无限；
-ms动画：旋转8s线性无限；
蚊子动画：旋转8s线性无限；
-o动画：旋转8s线性无限；
动画：自旋8s线性无限；
}
#loader:after{
内容："";
位置：绝对；
top:15px；
左：15px
右：15px
底部：15px
边界半径：50%;
/*背景：黄色；*/
边框：3px纯色透明；
边框-顶部-颜色：# fff
-网络工具包-动画：旋转8s线性1s无限；
-ms-动画：自旋8s线性1s无限；
蚊子动画：自旋8s线性1s无限；
用作复合形式的末尾元音动画：自旋8s线性1s无限；
动画：自旋8s线性1s无限；
}
@-网络工具包-关键帧旋转{
0%{
-WebKit-transform:旋转(0度)；
-质谱转换：旋转(0度);
变换：旋转(0度);
}
100%{
-WebKit-转换：旋转(360度)；
-质谱转换：旋转(360度);
变换：旋转(360度);
}
}
@关键帧旋转{
0%{
-WebKit-transform:旋转(0度)；
-质谱转换：旋转(0度);
变换：旋转(0度);
}
100%{
-WebKit-转换：旋转(360度)；
-质谱转换：旋转(360度);
变换：旋转(360度);
}
}
#loader_wrapper .load_title{
字体系列：打开San ；
颜色：# fff
字体大小：3雷姆；
宽度：100%;
文本对齐：居中；
z指数：9999;
位置：绝对；
top:70%；
不透明度：1;
行高：3雷姆
}
/风格
在cs.vue页面中引入并注册装货
cs.vue
模板
div class=main
正在加载v-if=！初始化标志/正在加载
111
/div
/模板
脚本
导入装载自./组件/加载
导出默认值{
姓名： tranin ，
data () {
返回{
initFlag:false，//初始化全局数据的请求错误的表示请求失败
}
},
组件：{
正在加载，
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。