滑动左侧菜单的滑入和滑出过渡

Question

我想复制页面左侧菜单上的转换https://privacy.google.com/

请注意左侧菜单如何过渡（当您单击汉堡包时）以及当您单击 X 时它会如何优雅地过渡出来。

我想复制两个过渡。 我怎样才能使用 CSS 做到这一点？

现在我有一个类left-menu的 div 。 它最初的左侧位置为 -284px。 然后当人们点击汉堡包时，我将左侧位置设置为 0。

我的left-menu类中有以下 CSS：

transition: all 0.3s ease;

我不知道如何进行滑入和滑出，以便类似于google过渡。

Answer 1

您还需要定义将为该过渡设置动画的 CSS 属性。 Google 在该实例中使用transform属性和translateX值。 您还需要一点 JavaScript 来处理添加和删除必要的类，这些类为转换提供新的属性值，或者在删除类的情况下删除它们。 在这种情况下，它是open课。 将他们的确切代码分解为更简单的形式，您将得到：

小提琴： https : //jsfiddle.net/aavf64s8/

HTML：

<header>
    <nav class="home" id="menu">
        <a class="nav-trigger" href="#">menu</a>
    </nav>
    <nav id="nav-content">
        <div class="nav-background">hello</div>
    </nav>
</header>

CSS：

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15
}

header #menu {
    display: block;
    height: 58px;
    padding: 0 1.95em;
}

header #menu a {
    position: relative;
    z-index: 3;
}

header #nav-content .nav-background {
    background: #fff;
    height: 100%;
    left: -330px;
    position: fixed;
    top: 0;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    transform: translateX(-110%);
    width: 100%
}

header.open #nav-content .nav-background {
    -webkit-transform: translateX(330px);
    -ms-transform: translateX(330px);
    transform: translateX(330px)
}

JavaScript：

var menu = document.getElementById('menu');
menu.addEventListener('click',
    function () {
        var header = document.getElementsByTagName('header')[0];
        header.classList.toggle('open');
    }
);

您现在可以使用一些更好的样式来修饰它，但这通常是他们在该页面上所做的。

编辑

要添加覆盖谷歌这样做（他们实际上并没有以任何方式对其进行动画处理）：

添加此 HTML：

<div id="curtain"></div>

添加这个CSS：

#curtain {
    background-color: #fff;
    height: 1px;
    position: fixed;
    top: 0;
    width: 1px;
    z-index: -1
}

#curtain.menu-opened {
    background-color: rgba(0, 0, 0, .4);
    height: 100%;
    width: 100%;
    z-index: 1
}

更新的JS：

var menu = document.getElementById('menu');
menu.addEventListener('click',
    function() {
        var header = document.getElementsByTagName('header')[0];
        header.classList.toggle('open');
        var curtain = document.getElementById('curtain');
        curtain.classList.toggle('menu-opened');
    }
);

小提琴： https : //jsfiddle.net/aavf64s8/2/

Answer 2

我通过滑动右侧菜单解决了这个问题（与这个问题相反）：

.animated-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    transition: transform .5s ease;
    transform: translateX(100%);
}

.animated-menu.open {
    transform: translateX(0%);
}

添加 onClick 处理程序来切换它：

document.querySelector('.animated-menu').classList.toggle('open')