共计 2325 个字符,预计需要花费 6 分钟才能阅读完成。
一、起步常识储备:
1.transform: rotate(1turn)transform: rotate(1turn);` 等价于 `transform: rotate(360deg);
2.transform-origintransform-Origin 属性容许您更改转换元素的地位。就是用来设置元素静止的基点,即终点
css 代码:
<style lang="less" scoped>
// 设置元素组件大小为利用它的父元素大小
.my_loading {
position: absolute;
top: 0%;
z-index: 10;
background-color: #13aa52;
height: 100%;
width: 100%;
}
.loading_box {
// 用于设置旋转元素居中
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
height: 100%;
// 旋转类型封装
// 旋转类型 1:单个(树叶展现).shuye {
position: absolute;
top: 0%;
animation: loading 1s infinite;// 静止名叫 loading
-webkit-animation: loading 1s infinite;
position: absolute;
transform-origin: 50% 50px; // 元素基点地位为 50% 开始,大小 50px
}
// 旋转类型 2:多个(小圆点展现).circle {
position: absolute;
top: 0%;
// 设置红色小点总款式
li {
position: absolute;
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #ffffff;
}
// 设置第一个提早 0.125
li:nth-child(1){
animation: loading 1s infinite 0.125s;// 第一个为动画名,第二个为动画静止工夫,第三个为永恒属性,即动画继续永恒, 设置第四个参数的意思是用于提早
-webkit-animation: loading 1s infinite 0.125s ;
position: absolute;
transform-origin: 50% 50px; // 元素基点地位为 50% 开始,大小 50px
}
// 设置第 2 个提早 0.25
li:nth-child(2){
animation: loading 1s infinite 0.25s;
-webkit-animation: loading 1s infinite 0.25s ;
position: absolute;
transform-origin: 50% 50px; // 元素基点地位为 50% 开始,大小 50px
}
// 设置第 3 个提早 0.375
li:nth-child(3){
animation: loading 1s infinite 0.375s;
-webkit-animation: loading 1s infinite 0.375s ;
position: absolute;
transform-origin: 50% 50px; // 元素基点地位为 50% 开始,大小 50px
}
// 设置第 4 个提早 0.5
li:nth-child(4){
animation: loading 1s infinite 0.5s;
-webkit-animation: loading 1s infinite 0.5s ;
position: absolute;
transform-origin: 50% 50px; // 元素基点地位为 50% 开始,大小 50px
}
}
}
// 动画成果,旋转 360 度
@keyframes loading {
to {transform: rotate(1turn);
}
}
</style>
后果:
HTML 及 JS 代码:
<template>
<div v-if="isShowLoading" class="my_loading">
<div class="loading_box">
{{num}}%
<!-- 树叶加载 -->
<svg v-if="type=='leaf'"class="icon leaf"aria-hidden="true">
<use xlink:href="#icon-shuyec"></use>
</svg>
<!-- 小圆圈加载 -->
<div v-if="type=='circle'"class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
</div>
</template>
<script>
export default {
name: "loading",
props: {
isShowLoading: false,// 管制组件是否移除
// 设置默认加载为树叶类型
type:{default(){return 'leaf'}
}
},
data() {
return {num: 0,};
},
methods: {},
mounted() {
// 组件渲染时开始计时并生成随机数字~~~~,组件隐没时革除计时器
let timer;
if (this.isShowLoading == true) {if (this.isShowLoading == false) {clearInterval(timer);
}
timer = setInterval(() => {this.num = Math.floor(Math.random() * 100 + 1);
}, 1000);
}
},
};
</script>
传入 type=‘leaf’
成果:
传入 type=‘circle’
成果:
正文完