Question

我想复制页面左侧菜单上的转换 {{3}}

注意左菜单如何转换（当您点击汉堡包时），当您点击X时，它会优雅地过渡。

我想要复制两个过渡。我怎么能用CSS做到这一点？

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

我的left-menu课程中有以下CSS：

left-menu

我不知道如何进行幻灯片放映和滑出，以便它与谷歌过渡类似。

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

现在，您可以通过一些更好的样式来实现这一点，但这通常是他们在该页面上所做的事情。

修改

要添加叠加层，Google会执行此操作（它们实际上并未实际为其设置动画）：

添加此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')

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

2 个答案: