HTML

 

　　//vue中通过点击事件改变class

 

　　<div

 

　　class="burger"

 

　　style="float:right;"

 

　　:class="{'transform':rightTopBtn}"

 

　　@click.stop="rightTopBtn=!rightTopBtn"

 

　　>

 

　　<div></div>

 

　　<div></div>

 

　　<div></div>

 

　　</div>

 

　　CSS

 

　　

 

　　

 

　　<!--按钮容器START-->

 

　　.burger{

 

　　cursor:pointer;

 

　　display:inline-block;

 

　　margin:7px6px00;

 

　　outline:none;

 

　　}

 

　　<!--按钮容器END-->

 

　　<!--三条横线通过rotate3d实现旋转START-->

 

　　.burgerp{

 

　　width:30px;

 

　　height:4px;

 

　　margin-bottom:6px;

 

　　background-color:rgb(51,51,51);

 

　　transform:rotate3d(0,0,0,0);

 

　　}

 

　　<!--三条横线END-->

 

　　.burger.transformp{

 

　　background-color:transparent;

 

　　}

 

　　.burger.transformp:first-of-type{

 

　　top:10px;

 

　　transform:rotate3d(0,0,1,45deg)

 

　　}

 

　　.burger.transformp:last-of-type{

 

　　bottom:10px;

 

　　transform:rotate3d(0,0,1,-45deg)

 

　　}

 

　　<!--点击后第一个和第三个横线的效果START-->

 

　　.burger.transformp:first-of-type,.burger.transformp:last-of-type{

 

　　transition:transform.4s.3sease,background-color250msease-in;

 

　　background:#00c1de;

 

　　}

 

　　<!--点击后第一个和第三个横线的效果END-->

 

　　<!--取消点击后恢复动画START-->

 

　　.burgerp:first-of-type,.burgerp:last-of-type{

 

　　transition:transform.3sease.0s,background-color0msease-out;

 

　　position:relative;

 

　　}

 

　　<!--取消点击后恢复动画END-->

 

　　只用transition也是能达到animation的效果的通过设置不同属性的变化掌握好变化时间和延时的时间就可以让动画有先后顺序





本文转载自中文网