Question

http://www.biola.me/

我想要点击“关于”链接时的类似过渡效果。我见过代码，它使用css转换和转换。但是如何用jquery触发它？

提前致谢

Answer 1

在链接上添加单击事件侦听器。 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");
});

Codepen：

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

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

2 个答案: