單擊按鈕時的頁面轉換

Question

我創建了一個登錄頁面，圖像將淡入到屏幕中，然後用戶可以按下箭頭，並且它會將它們帶到具有更多內容的不同頁面。

我的目標是獲得它，以便當用戶按下按鈕時，新頁面滑入視圖中。

我發現了什麼，我想在這裏一個例子：https://tympanus.net/Development/PageTransitions/

我想用「移動到左/右」過渡....我試圖從這個網站下載源文件，並找出如何實現他們的代碼到我的，但我真的很困惑...有沒有人有任何建議，如何讓這個過渡工作？我想保持嚴格的HTML/CS /的Java/JQ ....

感謝

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.fade-in { 
 
    animation: animationFrames ease 1s; 
 
    animation-iteration-count: 1; 
 
    transform-origin: 50% 50%; 
 
    animation-fill-mode: forwards; 
 
    /*when the spec is finished*/ 
 
    -webkit-animation: animationFrames ease 1s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-transform-origin: 50% 50%; 
 
    -webkit-animation-fill-mode: forwards; 
 
    /*Chrome 16+, Safari 4+*/ 
 
    -moz-animation: animationFrames ease 1s; 
 
    -moz-animation-iteration-count: 1; 
 
    -moz-transform-origin: 50% 50%; 
 
    -moz-animation-fill-mode: forwards; 
 
    /*FF 5+*/ 
 
    -o-animation: animationFrames ease 1s; 
 
    -o-animation-iteration-count: 1; 
 
    -o-transform-origin: 50% 50%; 
 
    -o-animation-fill-mode: forwards; 
 
    /*Not implemented yet*/ 
 
    -ms-animation: animationFrames ease 1s; 
 
    -ms-animation-iteration-count: 1; 
 
    -ms-transform-origin: 50% 50%; 
 
    -ms-animation-fill-mode: forwards; 
 
    /*IE 10+*/ 
 
} 
 

 
@keyframes animationFrames { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translate(0px, -25px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
@-moz-keyframes animationFrames { 
 
    0% { 
 
    opacity: 0; 
 
    -moz-transform: translate(0px, -25px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    -moz-transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
@-webkit-keyframes animationFrames { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate(0px, -25px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    -webkit-transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
@-o-keyframes animationFrames { 
 
    0% { 
 
    opacity: 0; 
 
    -o-transform: translate(0px, -25px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    -o-transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
@-ms-keyframes animationFrames { 
 
    0% { 
 
    opacity: 0; 
 
    -ms-transform: translate(0px, -25px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    -ms-transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
#showcase { 
 
    background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
    padding: 0 20px; 
 
} 
 

 
#showcase h1 { 
 
    font-size: 6vw; 
 
    color: #fff; 
 
    font-family: passion one; 
 
    letter-spacing: 4vw; 
 
    margin-left: 4vw; 
 
    text-shadow: 2px 2px 3px #000; 
 
} 
 

 
#showcase h2 { 
 
    font-size: 2.5vw; 
 
    line-height: 2vw; 
 
    color: #fff; 
 
    font-family: passion one; 
 
    text-shadow: 2px 2px 3px #000; 
 
} 
 

 
#showcase .button { 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 10px 20px; 
 
    border-radius: 10px; 
 
    margin-top: 100px; 
 
    background-color: darkgreen; 
 
    text-shadow: 2px 2px 3px #000; 
 
} 
 

 
#showcase .button:hover { 
 
    background-color: green; 
 
    color: #fff; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: green; 
 
} 
 

 
.button:focus+.hiddendiv { 
 
    display: block; 
 
    margin-left: 100px; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="wrapper"> 
 
    <div class="wrapper fade-in"> 
 
    <header id="showcase"> 
 
     <div id="background"> 
 
     <h1>TITLE</h1> 
 
     </div> 
 
     <h2>2017</h2> 
 
     <a href="landing2.html" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a> 
 
    </header>

Answer 1

我實施了類似的使用這個jQuery插件東西... http://joaopereirawd.github.io/animatedModal.js/

正如您在插件文檔中看到的，您可以讓您的新窗口內容已經創建，並且當您單擊箭頭按鈕時，插件將使它顯示爲使用a您選擇的nimation。

在我的情況下，我需要新建窗口內容按鈕被按下，所以我創建一個點擊事件，該按鈕生成一個div內的所有新窗口內容（和一個新的鏈接，將負責真正觸發動畫模式），並將所有內容附加到DOM。然後創建與生成的div關聯的animatedModal元素，並使用click()函數在新鏈接中觸發點擊事件。

對於你的情況（包括CSS和下面的插件文檔以下JavaScript文件）...

HTML：

<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a> 

<div id="newwindow"> 

    <!-- IMPORTANT. Create the element to close the window!!! --> 
    <button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button> 

    <div class="yournewwindowcontent"> 
     <!-- Put your new window content here--> 
    </div> 

</div> 

JQUERY：

$("#linktonewwindow").animatedModal({ 
    modalTarget:'newwindow', 
    animatedIn:'bounceInLeft', // Choose the animations you prefer 
    animatedOut:'bounceOutLeft', 
    color:'#999999', // Background color of the new window 
    beforeOpen: function() { 
    },   
    afterOpen: function() { 
    }, 
    beforeClose: function() { 
    }, 
    afterClose: function() { 
    } 
}); 

我希望它有幫助