我正在尝试使用CSS变换为三线汉堡菜单中的图标设置动画以交叉到右箭头。第一次改造工作顺利,但我被困在第二次:横向箭头。
这是一个小提琴:
https://jsfiddle.net/v0fgvdg2/25
SCSS的相关风格:
.threebar {
cursor: pointer;
margin-top: 33px;
margin-left: 33px;
.bar {
width: 70px;
height: 22px;
background: #000;
margin-bottom: 11px;
transition: all 0.5s ease;
&:nth-child(1) {
transform-origin: 50%;
}
&:nth-child(2) {
transform-origin: 50%;
}
}
&.cross {
.bar:nth-child(1) {
transform: translateY(75%) rotate(45deg);
}
.bar:nth-child(2) {
transform: translateY(-75%) rotate(-45deg);
}
.bar:nth-child(3) {
opacity: 0;
}
}
&.arrow {
.bar:nth-child(1) {
background: red;
transform: scaleX(0.5) translateY(50%) rotate(45deg);
}
.bar:nth-child(2) {
background: blue;
transform: scaleX(0.5) translateY(50%) rotate(-45deg);
}
.bar:nth-child(3) {
opacity: 0;
}
}
}
我无法真正了解如何将转换应用于箭头状态。
我希望右箭头像十字架的左侧,因此scaleX(0.5)
,但这会扭曲形状,而不是像我希望的那样简单地将它减半。
有没有人有关于如何思考的提示?
非常感谢!
答案 0 :(得分:7)
这是产生您正在寻找的效果的一种方法。我已经改变了位置和其他东西,但基本的想法仍然与原来的相同。我已经完全定位了所有三个条形元素,并使用transform: translateY()
将它们放入原始位置。当形状需要变成箭头时,我更改了transform-origin
,然后应用了必要的变换。
SCSS代码:
.threebar {
cursor: pointer;
position: relative;
height: 88px; /* 22px * 3 + space between (11px * 2) */
margin-top: 33px;
margin-left: 33px;
.bar {
position: absolute;
width: 70px;
height: 22px;
background: #000;
top: 33px;
transition: all 0.5s ease;
&:nth-child(1) {
transform: translateY(-150%);
}
&:nth-child(3) {
transform: translateY(150%);
}
}
&.cross {
.bar:nth-child(1) {
transform: rotate(45deg);
}
.bar:nth-child(3) {
transform: rotate(-45deg);
}
.bar:nth-child(2) {
opacity: 0;
}
}
&.arrow {
.bar:nth-child(1) {
transform-origin: right center;
transform: translateY(33%) rotate(45deg);
}
.bar:nth-child(3) {
transform-origin: right center;
transform: translateY(-33%) rotate(-45deg);
}
.bar:nth-child(2) {
opacity: 0;
}
}
}
使用已编译的CSS进行演示:
//Hamburger to cross
$(document).on('click', '.hamburger', function() {
$('.threebar')
.removeClass('hamburger')
.addClass('cross');
});
// Cross to Arrow
$(document).on('click', '.cross', function() {
$('.threebar')
.removeClass('cross')
.addClass('arrow');
});
// Arrow to Hamburger
$(document).on('click', '.arrow', function() {
$('.threebar')
.removeClass('arrow')
.addClass('hamburger');
});

.threebar {
cursor: pointer;
position: relative;
height: 88px; /* 22px * 3 + space between (11px * 2) */
margin-top: 33px;
margin-left: 33px;
}
.threebar .bar {
position: absolute;
width: 70px;
height: 22px;
background: #000;
top: 33px;
transition: all 0.5s ease;
}
.threebar .bar:nth-child(1) {
transform: translateY(-150%);
}
.threebar .bar:nth-child(3) {
transform: translateY(150%);
}
.threebar.cross .bar:nth-child(1) {
transform: rotate(45deg);
}
.threebar.cross .bar:nth-child(3) {
transform: rotate(-45deg);
}
.threebar.cross .bar:nth-child(2) {
opacity: 0;
}
.threebar.arrow .bar:nth-child(1) {
transform-origin: right center;
transform: translateY(33%) rotate(45deg);
}
.threebar.arrow .bar:nth-child(3) {
transform-origin: right center;
transform: translateY(-33%) rotate(-45deg);
}
.threebar.arrow .bar:nth-child(2) {
opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='threebar hamburger'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>
&#13;
不同尺寸的演示:
输出似乎也是合理的响应。下面是一个不同尺寸的演示版。
//Hamburger to cross
$(document).on('click', '.hamburger', function() {
$('.threebar')
.removeClass('hamburger')
.addClass('cross');
});
// Cross to Arrow
$(document).on('click', '.cross', function() {
$('.threebar')
.removeClass('cross')
.addClass('arrow');
});
// Arrow to Hamburger
$(document).on('click', '.arrow', function() {
$('.threebar')
.removeClass('arrow')
.addClass('hamburger');
});
&#13;
.threebar {
cursor: pointer;
position: relative;
height: 90px;
margin-top: 33px;
margin-left: 33px;
}
.threebar .bar {
position: absolute;
width: 75px;
height: 25px;
background: #000;
top: 25px;
transition: all 0.5s ease;
}
.threebar .bar:nth-child(1) {
transform: translateY(-150%);
}
.threebar .bar:nth-child(3) {
transform: translateY(150%);
}
.threebar.cross .bar:nth-child(1) {
transform: rotate(45deg);
}
.threebar.cross .bar:nth-child(3) {
transform: rotate(-45deg);
}
.threebar.cross .bar:nth-child(2) {
opacity: 0;
}
.threebar.arrow .bar:nth-child(1) {
transform-origin: right center;
transform: translateY(33%) rotate(45deg);
}
.threebar.arrow .bar:nth-child(3) {
transform-origin: right center;
transform: translateY(-33%) rotate(-45deg);
}
.threebar.arrow .bar:nth-child(2) {
opacity: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='threebar hamburger'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>
&#13;
使用箭头进行演示,就像十字架的左半部分一样:
我最初的假设是你只需要将十字架改成箭头(类似于十字架的左半部分)。如果你的意思是与左半部分完全相同(即缩小),那么你可以使用下面的代码片段。
//Hamburger to cross
$(document).on('click', '.hamburger', function() {
$('.threebar')
.removeClass('hamburger')
.addClass('cross');
});
// Cross to Arrow
$(document).on('click', '.cross', function() {
$('.threebar')
.removeClass('cross')
.addClass('arrow');
});
// Arrow to Hamburger
$(document).on('click', '.arrow', function() {
$('.threebar')
.removeClass('arrow')
.addClass('hamburger');
});
&#13;
.threebar {
cursor: pointer;
position: relative;
height: 88px;
margin-top: 33px;
margin-left: 33px;
}
.threebar .bar {
position: absolute;
width: 70px;
height: 22px;
background: #000;
top: 33px;
transition: all 0.5s ease;
}
.threebar .bar:nth-child(1) {
transform: translateY(-150%);
}
.threebar .bar:nth-child(3) {
transform: translateY(150%);
}
.threebar.cross .bar:nth-child(1) {
transform: rotate(45deg);
}
.threebar.cross .bar:nth-child(3) {
transform: rotate(-45deg);
}
.threebar.cross .bar:nth-child(2) {
opacity: 0;
}
.threebar.arrow .bar:nth-child(1) {
transform-origin: right center;
transform: translateX(-33.33%) translateY(33%) rotate(45deg) scaleX(0.66);
}
.threebar.arrow .bar:nth-child(3) {
transform-origin: right center;
transform: translateX(-33.33%) translateY(-33%) rotate(-45deg) scaleX(0.66);
}
.threebar.arrow .bar:nth-child(2) {
opacity: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='threebar hamburger'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>
&#13;
答案 1 :(得分:3)
您的示例中的问题是转换操作的顺序。你需要记住,首先执行最右边的操作,在你的情况下是旋转。只有这样才会应用缩放,从而产生您看到的奇怪角度。
所以,只需转动订单,它就会更清晰,您不需要更改原点或使用倾斜操作:
transform: translateY(50%) rotate(45deg) scaleX(0.5);
Simple DEMO(您仍需要调整翻译)