我正在尝试创建一个CSS动画,当用户单击汉堡菜单时,它会转换为x(步骤1),然后当用户再次单击它时,它会动画回到汉堡菜单(步骤2).
第1步有效,但我不知道如何反转动画.
谢谢你的帮助!
HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
@-webkit-keyframes rotate-plus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(45deg);
}
}
@-webkit-keyframes rotate-minus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(-45deg);
}
}
@-webkit-keyframes transition-1 {
from {
top: -6;
transition: all .2s ease-out;
}
to {
top: 0;
transition: all .2s ease-out;
}
}
@-webkit-keyframes transition-2 {
from {
bottom: -6;
transition: all .2s ease-out;
}
to {
bottom: 0;
transition: all .2s ease-out;
}
}
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span:before {
top: -6px;
}
#mobile-menu span:after {
bottom: -6px;
}
#mobile-menu.active span {
background-color: transparent;
}
#mobile-menu.active span:before {
-webkit-animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
}
#mobile-menu.active span:after {
-webkit-animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
}
jQuery的
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});
最佳答案 我收回了我在上面的评论中所说的内容.毕竟看起来可以用普通的CSS做到这一点……诀窍是正确使用转换延迟.
HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span {
transition: background-color .3s ease .3s;
-webkit-transition: background-color .3s ease .3s;
}
#mobile-menu span:before {
top: -6px;
transition: top .2s ease .2s, transform .2s ease;
-webkit-transition: top .2s ease .2s, -webkit-transform .2s ease;
}
#mobile-menu span:after {
bottom: -6px;
transition: bottom .2s ease .2s, transform .2s ease;
-webkit-transition: bottom .2s ease .2s, -webkit-transform .2s ease;
}
#mobile-menu.active span {
background-color: transparent;
transition: background-color .3s ease;
-webkit-transition: background-color .3s ease;
}
#mobile-menu.active span:before {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: top .2s ease .1s, transform .2s ease .3s;
-webkit-transition: top .2s ease .1s, -webkit-transform .2s ease .3s;
}
#mobile-menu.active span:after {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: bottom .2s ease .1s, transform .2s ease .3s;
-webkit-transition: bottom .2s ease .1s, -webkit-transform .2s ease .3s;
}
jQuery的
$(function() {
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});
})