Mobile 动画基金会5画布图标

现在我在谷歌上搜索了半天，尝试了几种解决方案，但都不管用。所以你们是我最后的机会：（ 我使用foundation5建立了一个新网站。对于移动版本，我使用offcanvas。我现在正尝试替换offcanvas汉堡，或者至少对其进行动画制作。我认为开箱即用的样式并不是真正的用户友好，因为它并不表示它也可以再次用于关闭offcanvas

我在找像这样的东西：

我已经试过了

 .menu-icon.arrow.close {
  transform: scale3d(.8,.8,.8);
}

.menu-icon.arrow.close .lines{
    &:before,
    &:after {
      top: 0;
      width: $button-size/1.8;
    }

    &:before { transform: rotate3d(0,0,1,40deg); }
    &:after { transform: rotate3d(0,0,1,-40deg); }
}

用这样的按钮

    <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon lines-button arrow arrow-left" role="button" aria-label="Toggle Navigation"><span class="lines"></span></a>
    </section>

---

有什么建议吗？

这里有一个JSFIDLE，使用您提供的链接中的CSS类和一些Javascript添加/删除“close”类以获得动画

$(".lines-button").click(function(){
    $(this).toggleClass('close');
});
$(".exit-off-canvas").click(function(){
    $("#startupButton").removeClass("close");
});

---

从您提供的链接中，您可以添加一个简单的脚本，单击该脚本可以在图标容器中添加/删除一个“已关闭”类，然后使用CSS，您可以根据需要转换图标。@geo1302谢谢您。我像>>一样尝试过。请检查更新的问题。对我来说不起作用吗？如何“关闭”图标当你点击按钮时，类会被添加到按钮中？@geo1302抱歉，我忘记了-我已经将脚本添加到页脚，将document.queryselectoral改为a.menu-icon而不是按钮，但我真的不太熟悉JS-我更像是后端类型的人：S谢谢你的时间，我真的很感激！我不能告诉你有多棒你是的，真的。但这对我来说有点有用。三行越来越小了，课程已经附加了。但是这三行本身不会产生动画。你的小提琴只是给我“文本”作为输出。是的，我编辑了链接，以尽可能少地显示文本（“文本”）。因为这可能会分散注意力。这可能是一个浏览器问题，它不适合你吗？可能是，但我现在疯了。。。。看了几个小时后，我把事情弄得越来越糟：我真的不知道该怎么办。这个例子仍然适用于我，所以我想它不是浏览器。也许你可以把你的代码放在小提琴上，我会看一看。我很抱歉！这是我自己的错-我只是看着你的新小提琴，删除了添加close类的JS，所以现在它就像一个魅力。你花了一个小时来对付我的愚蠢。。。不知道该怎么感谢你。。。你真棒！