Javascript滑屏切换场景

Question

Javascript滑屏切换场景

Wscats opened this issue 8 years ago · comments

滑屏切换的效果，关键是transform动画实现，动画运行后再hide隐藏实现，配合移动端一些滑动手势库可以简单实现一些幻灯片效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div class="page page1 page_moveToTop">
            <div class="wrap">
            </div>
        </div>
        <div class="page page2 page_moveFromBottom">
            <div class="wrap">
            </div>
        </div>
    </body>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            font-size: 100px;
            text-align: center;
        }

        .page1 {
            background-color: #CCCCCC;
            background-size: cover;
        }

        .page2 {
            background-color: #FFFF66;
            background-size: cover;
        }

        .wrap {}

        .page_moveToTop {
            -webkit-animation: moveToTop .6s ease both;
            animation: moveToTop .6s ease both;
        }

        @keyframes moveToTop {
            from {}
            to {
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
            }
        }

        .page_moveFromBottom {
            -webkit-animation: moveFromBottom .6s ease both;
            animation: moveFromBottom .6s ease both;
        }

        @keyframes moveFromBottom {
            from {
                -webkit-transform: translateY(100%);
                transform: translateY(100%);
            }
        }
    </style>
</html>