vue动态加载组件,vue组件切换动画
这篇文章主要为大家详细介绍了某视频剪辑软件加载中动画组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件加载中动画组件的使用，供大家参考，具体内容如下
（模仿蚂蚁设计加载中样式)效果图如下：
创建Loading.vue组件：
模板
“m旋转点”
span class=u-dot-item/span
span class=u-dot-item/span
span class=u-dot-item/span
span class=u-dot-item/span
/div
/模板
脚本
导出默认值{
名称："正在加载"
}
/脚本
style lang=less 范围。m旋转点{
//水平垂直居中
位置：相对；
top:calc(50%-18px)；
边距：0自动；
宽度：36px
高度：36px
变换：旋转(45度);
-质谱转换：旋转(45度);/* Internet Explorer */
-moz-转换：旋转(45度);/* Firefox */
-WebKit-转换：旋转(45度);/*野生动物园和铬*/
-o型转换：旋转(45度);/*歌剧*/
动画：旋转1.2秒线性无限；
-网络工具包-动画：旋转1.2秒线性无限；
@关键帧旋转{
100% {变换：旋转(405度);}
}。u-dot-item { //单个圆点样式
位置：绝对；
宽度：10px
高度：10px
背景：@ mainColor
边界半径：50%;
不透明度：3;
动画：自旋移动1s线性无限交替；
-网络工具包-动画：自旋移动1s线性无限交替；
@关键帧旋转移动{
100% {不透明度：1;}
}
}。u点项目：第一个孩子{
top:0；
左：0;
}。u-dot-item:n-child(2){
top:0；
右：0;
动画-延时：4s；
-网络工具包-动画-延迟：4s；
}。u-dot-item:n-child(3){
底部：0;
右：0;
动画-延时：8s；
-网络工具包-动画-延迟：8s；
}。u点项目：最后一个孩子{
底部：0;
左：0;
动画-延迟：1.2秒
-网络工具包-动画-延迟：1.2秒
}
}
/风格
在要使用的页面引用：
从" @/组件/加载"导入装载
组件：{
装货
}
div :class=[m-area ，{loading: isLoading}]
装载/
/div。间位区域{
边距：0自动；
宽度：500像素
高度：400像素
背景：# FFFFFF
}。正在加载{ //加载过程背景虚化
背景：# fafafa
指针事件：无；//屏蔽鼠标事件
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。