从选项图标切换成关闭图标
1. 动画demo：
2. 实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.option-icon{
cursor: pointer;
display: inline-block;
float: right;
font-size: 0;
text-align: center;
transition: transform .3s,-webkit-transform .3s;
}
.option-icon span{
background: #575d6c;
border-radius: 3px;
display: block;
height: 2px;
margin-bottom: 3px;
transform-origin: 16px;
transition: background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,transform .5s cubic-bezier(.77,.2,.05,1),width .5s,-webkit-transform .5s cubic-bezier(.77,.2,.05,1);
width: 18px;
}
.option-icon.close-status span{
opacity: 1;
transform: rotate(45deg);
}
.option-icon.close-status span:nth-last-child(3){
opacity: 1;
transform: rotate(-45deg);
}
.option-icon.close-status span:nth-last-child(2){
opacity: 0;
transform: rotate(0);
transition: width .5s;
width: 0;
}
</style>
<div class="option-icon" onclick="handleClickIcon()">
<span></span>
<span></span>
<span></span>
</div>
<script>
function handleClickIcon(){
var dom = document.querySelector('.option-icon')
if(dom.className.indexOf('close-status') > 0){
dom.className = 'option-icon'
}else{
dom.className = 'option-icon close-status'
}
}
</script>
</body>
</html>
下个动画点预告
面板下拉过程中，文字是有渐渐展示的效果，慢慢呈现
