transition-分栏按钮动画

  =》

css：

.cateBtn{

　　position: relative;

　　background: #fff;

　　border: 1px solid #ddd;

　　border-radius: 6px;

　　text-align: center;

　　width: 30px;

　　height: 30px;

　　display: inline-block;

}

.cateLine,.cateLine::after,.cateLine::before{

　　position: absolute;

　　width: 20px;

　　height: 2px;

　　background: red;

　　transition: all .3s linear 0s;

}

.cateLine{

　　display: inline-block;

　　top: 50%;

　　left: 50%;

　　transform: translate(-50%,-50%);

}

.cateLine::after{

　　content: "";

　　bottom: 6px;

　　left: 0px;

}

.cateLine::before{

　　content: "";

　　top: 6px;

　　left: 0px;

}

 

.open .cateLine{

　　background: rgba(0,0,0,0);

}

.open .cateLine::after{

　　bottom: 0px;

　　transform: rotate(135deg);

}

.open .cateLine::before{

　　top: 0px;

　　transform: rotate(45deg);

}

html：

<a class="cateBtn">

　　<span class="cateLine">

　　</span>

</a>

js：

$(".cateBtn").on("click",function(){

　　$(this).toggleClass("open");

})