如何使用 jquery 触发此页面转换？

Question

http://www.biola.me/

我想要与在 "about" link 中单击时类似的过渡效果。我看过代码，它使用 css 转换和转换。但是如何使用 jquery 触发它？

提前致谢

Answer 1

在 link 上添加点击事件侦听器。 toggleOverlay 是他们调用的函数，可以在他们的demo7.js 文件

中看到

Answer 2

这是一个很好的方法：

CSS:

html,
body {
    height: 100%;
}

.nav > li {
    list-style: none;
    cursor: pointer;
}

.nav > li > a {
    font-size: 24px;
}

.container {
    overflow-x: hidden;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}   

.container.overlay-open {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(153,204,51,0.9);
    overflow-y: scroll;
}   

.overlay .close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #FFFFFF;
    font-size: 21px;
    cursor: pointer;
}

.overlay-contentpush {
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}   

.overlay-contentpush.open {
    visibility: visible;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

HTML:

<div class="container">
    <ul class="nav">
        <li>
            <a data-trigger="about">About</a>
        </li>
        <li>
            <a data-trigger="contact">Contact</a>
        </li>
    </ul>
</div>

<section class="overlay overlay-contentpush" id="home"></section>

<section class="overlay overlay-contentpush" id="about">
    <div class="close">
        Close
    </div>
</section>

<section class="overlay overlay-contentpush" id="contact">
    <div class="close">
        Close
    </div>
</section>

JS:

// Trigger overlay
$("[data-trigger='about']").click(function() {
    $(".container").addClass("overlay-open");
    $("#about").addClass("open");
});
$("[data-trigger='contact']").click(function() {
    $(".container").addClass("overlay-open");
    $("#about").addClass("open");
});
// Close overlay
$(".close").click(function() {
    $(".container").removeClass("overlay-open");
    $(".overlay").removeClass("open");
});

代码笔：

http://codepen.io/charliebeckstrand/pen/WxNjME

如何使用 jquery 触发此页面转换？

How do I trigger this page transition using jquery?

css

jquery

css-transitions

css-transforms