javascript - 向左滑动菜单的滑入和滑出过渡

Question

我想复制页面左侧菜单的转场效果 https://privacy.google.com/

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

我想复制两个过渡。我如何使用 CSS 做到这一点？

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

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

transition: all 0.3s ease;

我不知道如何做滑入和滑出，所以它类似于google transition。

Answer 1

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

fiddle :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');
    }
);

fiddle :https://jsfiddle.net/aavf64s8/2/