我正在尝试为移动菜单制作动画,因此当点击它时三条纹应该变成“X”,当关闭菜单时它应该恢复为三条纹。 “X”的动画效果非常好,但关闭时它会跳回三条纹,而不是平滑地过渡回它。这是因为我当然完全删除了 x
类,但我无法弄清楚我将如何“向后”过渡。
到目前为止,这是我的代码:
HTML:
<button id="nav-toggle">
<span class="toggle-pin"></span>
<span class="toggle-pin"></span>
<span class="toggle-pin"></span>
</button>
CSS(萨斯):
#nav-toggle {
position: relative;
z-index: 9000;
float: right;
margin: 15px 15px 0 0;
background-color: transparent;
border: none;
outline: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
@include respondFrom(widescreen) {
display: none;
}
.toggle-pin {
width: 34px;
height: 4px;
background: palette();
display: block;
margin: 5px 0;
border-radius: 5px;
}
&.x {
.toggle-pin {
margin: 11px 0;
}
.toggle-pin:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
}
.toggle-pin:nth-child(2) {
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.toggle-pin:nth-child(3) {
margin-top: -30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
}
}
}
切换脚本:
$navToggle.on('click', function() {
if ($navToggle.hasClass('x')) {
$navToggle.removeClass('x');
}
else {
$navToggle.addClass('x');
}
});
最佳答案
只需默认定义转换:
SCSS
#nav-toggle {
position: relative;
z-index: 9000;
float: right;
margin: 15px 15px 0 0;
background-color: transparent;
border: none;
outline: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: pointer;
@include respondFrom(widescreen) {
display: none;
}
.toggle-pin {
width: 34px;
height: 4px;
background: red;
display: block;
margin: 5px 0;
border-radius: 5px;
&:nth-child(1) {
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
}
&:nth-child(2) {
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
&:nth-child(3) {
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
}
}
&.x {
.toggle-pin {
margin: 11px 0;
&:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
margin-top: -30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}
}
关于jquery - 如何使移动菜单转换为 "backwards"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30884551/