html - 如何将动画添加到汉堡菜单 Bootstrap 4？

Question

我在一个网站上工作，我想从 Bootstrap 向我的静态导航栏添加动画。当在移动视口(viewport)上切换按钮时，我希望 3 个水平条变为 X。

注意:我使用的是 Bootstrap 4，而不是 3。一些 BS3 类在 BS4 中不起作用

这就是我想要完成的:example .但是，我找到了多个教程，但我正在努力解决它。原因是所有这些教程都是基于 BS3 的。 BS3 使用 navbar-toggle 类，而 BS4 使用 navbar-toggler 类。这是主要区别，因为 BS4 版本在 css 中包含一个 View 框:

.navbar-toggler {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    border-color: rgba(0,0,0,.1);
}

在 bootstrap.min.css 中，navbar-toggler-class 被使用了 11 次。因此，如果我修改此类，它(可能)会中断。

HTML of menu:
<div class="container">
        <div class="row hidden-lg-up">
            <div class="wrapper-right">
                <a href="#"><img src="img/placeholders/225x50.png" alt="Logo Company Mobile" class="mobile-only" /></a>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-light navbar-full">
                <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
                <div class="collapse navbar-toggleable-md" id="navbarResponsive">
                    <a class="navbar-brand vc-parent" href="#">
                        <img src="img/placeholders/250x50.png" alt="Logo Company Desktop" class="img-fluid desktop-only" />
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item active align-middle">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item align-middle">
                            <a class="nav-link" href="#">Item</a>
                        </li>
                        <li class="nav-item align-middle">
                            <a class="nav-link" href="#">Item</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

谁能指出我正确的方向？

Answer 1

打开菜单时更改 .navbar-toggler-icon 背景

background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E");