从汉堡棒转换和转换

从汉堡棒转换和转换 - >点击X（使用手写笔）(CSS transition & transform from hamburger bars --> X on click (using stylus))

我有一个移动断点的菜单汉堡“图标”。我把它设置为3行，我希望它们转换为X（将关闭菜单）。

我希望顶部的条形走45度，中间的条形条消失，底部的条形条形走向45度。然后顶部和底部的条形图将向上移动并创建一个X.

现在......只要我按住鼠标，它就会动画。为什么会这样？我只需要动画就可以完成点击。

HTML：

笔：

.hamburger-icon &:before, &.hamburger-icon span, &:after content '' display block height 2px width 20px background-size 100% background rgba(255,255,255,0.5) margin 6px auto 7px auto transition all 0.2s linear &:active &.hamburger-icon span background-color transparent &:before transform rotate(45deg) top -10px height 2px background rgba(255,255,255,0.5) width 30px &:after transform rotate(-45deg) bottom -10px height 2px background rgba(255,255,255,0.5) width 30px

i have a menu hamburger "icon" for the mobile breakpoint. i have it set up as 3 lines and i want them to transition to an X (that will close the menu).

i want the top bar to go 45 degrees, the middle bar to disappear, and the bottom bar to go 45 degrees the other way. then the top and bottom bars will shift up and create an X

AS OF NOW....it only animates for as long as i hold my mouse down. Why is this so? I just need the animation to complete itself on click.

html:

stylus:

.hamburger-icon &:before, &.hamburger-icon span, &:after content '' display block height 2px width 20px background-size 100% background rgba(255,255,255,0.5) margin 6px auto 7px auto transition all 0.2s linear &:active &.hamburger-icon span background-color transparent &:before transform rotate(45deg) top -10px height 2px background rgba(255,255,255,0.5) width 30px &:after transform rotate(-45deg) bottom -10px height 2px background rgba(255,255,255,0.5) width 30px

最满意答案

:active行为就像鼠标一样。当您释放单击时，动画将停止。

您有一些使用JS或CSS的解决方案。

在CSS中 ，您可以使用keyframes来确保完成动画。

在JS中 ，您可以使用click event ，该click event可以使用JS动画为您的图标设置动画，或者添加一个包含您点击的属性的类。

以下示例使用预处理器 。 LESS或SASS在这里具有相同的语法：

.hamburger-icon { /* .hamburger-icon styles */ &.active { span { background-color: transparent; } &:before { transform: rotate(45deg); top: -10px; height: 2px; background: rgba(255,255,255,0.5); width: 30px; } &:after { transform: rotate(-45deg); bottom: -10px; height: 2px; background: rgba(255,255,255,0.5); width: 30px; } } }

然后在jQuery中

$('.hamburger-icon').on('click', function(){ $(this).addClass('active'); });

希望你明白了。

祝你好运'

The :active acts like a mouse down. When you'll release the click, the animation will stop.

You have a few solutions using JS or CSS.

In CSS, you could use the keyframes to be sure your animation will be finished.

In JS, you could use a click event which could animate your icon with JS animations, or add a class which would contain your clicked properties.

The following example is using a preprocessor. LESS or SASS would have the same syntax here:

.hamburger-icon { /* .hamburger-icon styles */ &.active { span { background-color: transparent; } &:before { transform: rotate(45deg); top: -10px; height: 2px; background: rgba(255,255,255,0.5); width: 30px; } &:after { transform: rotate(-45deg); bottom: -10px; height: 2px; background: rgba(255,255,255,0.5); width: 30px; } } }

Then in jQuery

$('.hamburger-icon').on('click', function(){ $(this).addClass('active'); });

Hope you got the point.

Good Luck'

更多推荐