0

我想进行滑入式页面转换（从 index.html 到 project.html，反之亦然）。我找到了一个教程并按照它进行操作，但是当我单击链接时没有显示过渡。

有人可以帮忙吗？我对javascript还不太熟悉。

非常感谢

我的索引.HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <!--bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!--Specific-->
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div id="barba-wrapper">
        <div class="barba-container">
                <!--Header-->
                <div class="header" class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-4 header-sides align-right ">
                            <a class="menu-letter active" href="index.html">WORK</a>
                        </div>
                        <div class="col-4 header-middle">
                            <img class="menu-image" src="Icon - Ayam.png" alt="" />
                        </div>
                        <div class="col-4 header-sides align-left">
                            <a class="menu-letter " href="about.html">ABOUT</a>
                        </div>
                    </div>
                </div>

                <!--Content-->

                <div id="content-index" class="container-fluid">
                    <div class="row">
                        <!--Product-->
                        <div class="col-20">
                            <a href="project.html">
                                <img src="" alt="">
                                <h7 class="bottom-right">Mobile Application</h7>
                            </a>
                        </div>
                        <div class="col-20"></div>

                <!--Footer-->
                <div class="footer">
                    <h6>&copy; 2021</h6>
                </div>
            </div>
        </div>
  

    <!--Script-->
    <!--Bootstrap-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <!--barba-->

    <script src="barba-1.0.0/dist/barba.min.js" type="text/javascript"></script>

    <!--Personalize-->
    <script src="barba-effect.js" type="text/javascript"></script>
    <script src="style.js" type="text/javascript"></script>

</body>

</html>

项目.HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <!--bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!--Specific-->
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div id="barba-wrapper">
        <div class="barba-container">
                <div class="header-project" class="container-fluid" id="top">
                    <div class="row justify-content-center ">
                        <div class="col-10  align-left px-5 mt-3">
                            <h7 class='underline'>group</h7>
                            <h4 class="mt-3 mb-2">Project's name</h4>
                            <h6>Responsibility</h6>
                            <h6>Year</h6>
                        </div>
                        <div class="col-2 align-right px-5 mt-4">
                            <a href="index.html"><img class="cross" src="cancel.svg" alt="cross"></a>
                        </div>
                    </div>
                </div>

                <!--Content Project-->

                <div class="content-project" class="container-fluid mb-5">
                    <div class="row justify-content-center ">
                        <div class="col-lg-6 col-sm-8">
                            <img src="" alt="">
                        </div>
                    </div>
                </div>

                <div id="back-top" class="back-top mb-5">
                    <a href="#top">
                        <img class="rotate" src="left-arrow (1).svg" alt="" />
                    </a>
                </div>

                <!--Footer-->

                <div class="footer">
                    <h6>&copy; 2021</h6>
                </div>
            </div>
        </div>
  

    <!--Script-->
    <!--Bootstrap-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <!--barba-->
    <script src="barba-1.0.0/dist/barba.min.js" type="text/javascript"></script>
    <!--Personalize-->
    <script src="barba-effect.js" type="text/javascript"></script>
    <script src="style.js" type="text/javascript"></script>

</body>
</html>

Barba-effect.js

Barba.Pjax.start();

window.addEventListener("DOMContentLoaded", function () {
    var FadeTransition = Barba.BaseTransition.extend({
        start: function () {
            Promise
                .all([this.newContainerLoading, this.fadeOut()])
                .then(this.fadeIn.bind(this));
        },
        fadeOut: function () {

        },
        fadeIn: function () {
            this.newContainer.classList.add("slide-in");

            var that = this;

            this.newContainer.addEventListener("animationend", function () {
                that.newContainer.classList.remove("slide-in");
                that.done();
            });
        }
    });

    Barba.Pjax.getTransition = function () {

        return FadeTransition;
    };

})

样式.css


@keyframes slide-in{
    from{
        transform: translateX(100%);
        visibility: visible;
    }
    to{
        transform: translateX(0%);
    }
}

.slide-in{
    animation: slide-in 0.5s ease forwards;
}
4

0 回答 0