css3动画 提交成功圆圈画对勾

提交成功圆圈画对勾

这是一个动画效果，可以直接复制代码看特效。

遇到的问题

问题一：对号的动画要在圆圈执行完动画后执行

解决：

设置延迟动画：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>