vue界面刷新,vue 页面加载动画
这篇文章主要为大家详细介绍了某视频剪辑软件实现页面刷新动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现页面刷新动画的具体代码，供大家参考，具体内容如下
做一个某视频剪辑软件的页面刷新动画，找了好多动画样式，感谢大佬们造的轮子。
主要就是在index.html文件里面写一个动画样式，在页面刷新的时候让他去前面做动画，等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了，而判断我们的样式是否加载好可以用创造生命周期去判断，因为这个生命周期是在浏览器解析完超文本标记语言的各种样式后触发的，所以可以在app.vue的创造生命周期里面把动画样式移除
接下来是代码
index.html里面的代码
钢性铸铁样式：
style type= text/CSS scoped= scoped
html，正文{
宽度：100%;
身高：100%;
填充：0;
边距：0;
背景：矢车菊蓝；
}。装载{
宽度：100%;
身高：100%;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。旋转器{
宽度：300像素
高度：50px
位置：相对；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。微调器部门{
宽度：30px
高度：30px
背景色：# 67CF22
边框半径：100%;
边距：0px 10px
显示：内嵌-块；
-网络工具包-动画：弹跳延时1.4s无限缓入缓出；
动画：弹跳延时1.4s无限缓入缓出；
/*防止动画开始时第一帧闪烁*/
-网络工具包-动画-填充-模式：两者都有；
动画-填充-模式：两者都有；
}。spinner .bounce1 {
-网络工具包-动画-延迟：-0.32秒；
动画-延迟：-0.32秒；
}。spinner .bounce2 {
-网络工具包-动画-延迟：-0.16s；
动画-延迟：-0.16s；
}
@-网络工具包-关键帧反弹延迟{
0%，80%，100% {-WebKit-transform:scale(0.0)}
40% {-WebKit-transform:scale(1.0)}
}
@关键帧反弹延迟{
0%, 80%, 100% {
变换：缩放(0.0);
-WebKit-transform:scale(0.0)；
} 40% {
变换：缩放(1.0);
-WebKit-transform:scale(1.0)；
}
}
#app{
显示：无；
}
/风格
超文本标记语言代码
身体
div class=加载
div class=spinner
div class=bounce1/div
div class=bounce2/div
div class=bounce3/div
/div
/div
div id=app/div
/body
下面是app.vue的代码
脚本
导出默认值{
名称："应用程序",
data() {
返回{
}
},
已创建(){
//判断有没有动画的盒子在，在的话移除掉
让装货=文件。getelementsbyclassname( loadings )[0]
如果（加载){
document.body.removeChild(正在加载)
}
}
}
/脚本
style lang=less
正文{
背景：白色；//这里是把动画影响的背景颜色改回来
}
#app{
宽度：100%;
身高：100%;
显示：块；
//这里是把隐藏的应用盒子展示出来
}
/风格
这就是所有的页面刷新动画的代码了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。