Question

我有一个SVG汉堡包菜单图标，点击后会显示动画。目标是将其转变为“关闭”＃34;激活侧按菜单时按钮。我需要一些帮助来实现这一目标：

HTML：

    <div class="toggle-menu menu-right push-body">

    <svg class="inline-svg" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 32 22.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
        <title>Group</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>

        <g class="svg-menu-toggle" sketch:type="MSLayerGroup">
            <circle class="round" fill="#3B3B41" sketch:type="MSShapeGroup" cx="21" cy="21" r="21"></circle>
            <rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="26" width="18" height="4"></rect>
            <rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="19" width="18" height="4"></rect>
            <rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="12" width="18" height="4"></rect>
        </g>

    </svg>
</div>

CSS：

.svg-menu-toggle {
    fill: #fff;
    pointer-events: all;
    cursor: pointer;
}
.svg-menu-toggle .round {
    transition: fill .4s ease-in-out;
}
.svg-menu-toggle .bar {
    -webkit-transform: rotate(0) translateY(0) translateX(0);
    transform: rotate(0) translateY(0) translateX(0);
    opacity: 1;
    -webkit-transform-origin: 20px 10px;
    transform-origin: 20px 10px;
    -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
    transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
}
.svg-menu-toggle .bar:nth-of-type(1) {
    -webkit-transform-origin: 20px 10px;
    transform-origin: 20px 10px;
}
.svg-menu-toggle .bar:nth-of-type(3) {
    -webkit-transform-origin: 20px 20px;
    transform-origin: 20px 20px;
}
.svg-menu-toggle:active .bar:nth-of-type(1) {
    -webkit-transform: rotate(-45deg) translateY(-10px) translateX(-8px);
    transform: rotate(-45deg) translateY(-10px) translateX(-8px);
    fill: #3B3B41;
}
.svg-menu-toggle:active .bar:nth-of-type(2) {
    opacity: 0;
}
.svg-menu-toggle:active .bar:nth-of-type(3) {
    -webkit-transform: rotate(45deg) translateY(6px) translateX(0px);
    transform: rotate(45deg) translateY(6px) translateX(0px);
    fill: #3B3B41;
}
.svg-menu-toggle:active .round {
    fill: #F2F2F2;
}

用于菜单切换的Javascript：

     jQuery(document).ready(function ($) {
        $('.toggle-menu').jPushMenu();
    });

Answer 1

不使用：active伪元素，而是更容易向组中添加类（.svg-menu-toggle）。不幸的是，从jQuery中使用toggleClass是不可能的。

// CSS 
.svg-menu-toggle:active become .svg-menu-toggle.active

// JS
$('.toggle-menu').on('click', function(e) {
     var $toggle = $(this).find('.svg-menu-toggle');
     // toggleClass with addClass & removeClass
});

单击动画SVG汉堡菜单图标并将其保持在：活动状态

1 个答案: