我试图创建一个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");
});
答案 0 :(得分:2)
我收回了上述评论中所说的内容。看起来 可以用普通的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");
});
})
答案 1 :(得分:0)
查看JSfiddle,我从original one in this awesome Codepen稍微调整了一下(对于您的代码)。
<强> HTML 强>
<a id="mobile-menu" href="#">
<span></span>
</a>
<强> CSS 强>
a#mobile-menu {
display: inline-block;
width:30px;
height:18px;
cursor: pointer;
text-decoration: none;
}
a#mobile-menu span {
position: relative;
display: inline-block;
width: 30px;
height: 3px;
color:#252525;
font:bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent:-55px;
background: #252525;
transition:all .2s ease-out;
}
a#mobile-menu span::before, a#mobile-menu span::after {
content:'';
width: 30px;
height: 3px;
background: #252525;
position: absolute;
left:0;
transition:all .2s ease-out;
}
a#mobile-menu span::before {
top: -7px;
}
a#mobile-menu span::after {
bottom: -7px;
}
a#mobile-menu.active span {
background: #fff;
}
a#mobile-menu.active span::before {
top:0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
a#mobile-menu.active span::after {
bottom:0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
a#mobile-menu {
position: absolute;
left:50%;
margin-left:-9px;
top:50%;
margin-top:-9px;
}
<强>的jQuery 强>
$('a').click(function() {
$(this).toggleClass('active');
});
正如我所说,所有功劳都归to this codepen