提交成功圆圈画对勾
这是一个动画效果,可以直接复制代码看特效。
遇到的问题
问题一:对号的动画要在圆圈执行完动画后执行
解决:
设置延迟动画:animation-delay
属性规定动画开始的延迟时间。(我的代码使用简写)
问题二:css不能在display:none和display:block之间进行动画
- 我设置的动画是加载完一圈圆之后再中间显示对号。
- 首先需要默认圆圈里的对号不显示,圆圈进行动画特效结束后,对号开始进行特效并显示,那么就涉及
css不能在display:none和display:block之间进行动画
问题。 - 我查各种资料了解到问题产生的原因大概是:
由于display:none会引起页面的重绘事件,所以它是一个异步的延时事件,所以浏览器其实会先解析animate的代码,然后再执行display:none。
解决:
使用opacity: 0;
参考:https://www.cnblogs.com/yangzhou33/p/9119596.html
代码
粘贴可直接用,但是注意我写的是个dialog,需要你自己在外面调用init()方法。不想用dialog直接去掉就行。
<template>
<el-dialog
class="apply-dialog"
:visible.sync="visible"
width="30%"
:lock-scroll="false"
:close-on-click-modal="false"
:append-to-body="true"
center>
<div style="padding:10px;display: flex;justify-content: center;">
<div class="loader"></div>
</div>
<div class="font-36">收藏成功</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="visible = false">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible:false
}
},
methods: {
init() {
this.visible = true
}
},
}
</script>
<style>
// 圆圈
.loader {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid rgba(165, 220, 134, 0.2);
border-left-color: #A5DC86;
animation: animation_collect 1s linear 1 both; //infinite永远执行
}
// 圆圈动画代码
@keyframes animation_collect {
0% {
transform: rotate(270deg);
border-left-color: #A5DC86;
}
25% {
border-left-color: #A5DC86;
}
50% {
border-left-color: #A5DC86;
}
75% {
border-left-color: #A5DC86;
}
100% {
border-left-color: rgba(165, 220, 134, 0.2);
transform: rotate(0deg);
}
}
//对号
.loader::before {
position: absolute;
content: '';
top: 50%;
left: 15px;
border: 4px solid #A5DC86;
border-left-width: 0;
border-bottom-width: 0;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
// 设置动画延迟1s执行,先执行外层圆圈动画 结束后执行该动画
animation: animation_true 0.5s 1s linear 1 both;
// 外层执行动画执行时,里面不显示,但是不能使用display:none,所以用opacity代替
opacity: 0;
}
@keyframes animation_true {
0% {
opacity: 0;
width: 0px;
height: 0px;
}
33% {
opacity: 1;
width: 20px;
height: 0px;
}
100% {
opacity: 1;
width: 20px;
height: 40px;
}
}
</style>