ページがお互いに変化したときにアニメーションを追加する方法は？

Question

私はボタンを押した後、ページをゆっくりと変化させる方法を模索しています。 jQueryを使わずにJSだけを使いたい。今私はブロックを変更するスクリプトを持っていますが、私はdisplay noneを使います。私はこれでゆっくりと変化するページを加えることができるとは確信していません。私はtramsformプロパティを使用するためにtryiedしかし、うまくいきません。私はオーバーフローする必要はありません。それはあなたが、CSSアニメーションをプレイしているこのhttps://tympanus.net/Development/PageTransitions/

var acc = document.getElementsByClassName("btn-arrow"); 
 

 
for (var i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function showNext(){ 
 
    
 
    var parent = this.parentElement; 
 
    var nextToOpen = parent.nextElementSibling; 
 
    
 
    nextToOpen.style.display ="block"; 
 
    parent.style.display ="none"; 
 
    
 
} 
 
}

.big{ 
 
    transition-property: all; 
 
    transition-duration: 0.2s; 
 
    transition-timing-function: linear; 
 
    transition-delay: initial; 
 
    overflow: hidden; 
 
} 
 
.one{ 
 
    background:pink; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: flex;  
 
    justify-content: center; 
 
    align-items: flex-end; 
 
    
 
} 
 
.two{ 
 
    background:green; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display:none; 
 
    
 

 
} 
 
.icon-arrow-down2{ 
 
    font-size: 60px; 
 
    color: silver; 
 
    margin-bottom: 50px; 
 
} 
 
.btn-arrow{ 
 
    background-color : rgb(255, 238, 192); 
 
    box-shadow: none; 
 
    border: none; 
 
} 
 
.btn-arrow:hover{  
 
    border: none; 
 
} 
 
button, 
 
button:active, 
 
button:focus { 
 
    outline: none; 
 
}

<div class="big"> 
 
     <div class="one"> 
 
      <button class="btn-arrow" onclick="showNext()"> 
 
       <span class="icon-arrow-down2"></span> 
 
      </button> 
 

 
     </div> 
 
     <div class="two"></div> 
 
    </div>

Answer 1

に近く見えるように持っています。私はいくつかの変更を加えて正しい方向に向けるようにしました。しかし、基本的には、私の推薦は次のとおりです。

• あなたのすべてのページは、一般的なスタイル（.page）と同じクラスを持っているし、それらのそれぞれは、異なる背景色を持っています。

• 表示する次のページに追加される特定のクラス（.page-visible）が必要です。現在表示されているページから削除する必要があります。このクラスは可視性を制御するだけです。以前のクラス（.page）にはすべてのページの共通点と同様にdisplay: none;があることに注意してください。

• 動きごとに異なるアニメーションが必要です（上へ移動、下から左、右から左へ移動）。コードスニペットにサンプルを追加しました。

• そして魔法がanimationendイベントに耳を傾けています：あなたは、次のページが表示さ.page-visibleクラスを適用させる、両方のページ（現在の可視および次ページ）にアニメーションを適用し、イベントをendanimationに耳を傾けます。それが起こると、.page-visibleクラスを削除する前のページを非表示にして、アニメーションクラスを削除してください。

コードはこの2ページ（1,2ページ）だけで動作しますが、簡単に最適化できます。 the original page you postedを見ることをお勧めします。彼らのcssとjs（オープンクロームの開発者ツールとソースに行く、彼らはすべてがやっている方法を見られるようにファイルが小さくなっていません。

これは意味がありますか？私はそれが助けて、あなたを正しい方向に向けることを願っています。アニメーションは超楽しいです！ :)

（EDIT：ああ、ちょっと見たいボタンの幅に&の高さを追加しました、ちょっと左隅にあります）。

var acc = document.getElementsByClassName("btn-arrow"); 
 

 
for (var i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function showNext(){ 
 
     var visibleElement = document.getElementsByClassName('page-visible')[0]; 
 
     var nextToOpen = visibleElement.nextElementSibling; 
 
     
 
     nextToOpen.addEventListener('animationend',() => { 
 
     visibleElement.classList.remove('page-visible'); 
 
     visibleElement.classList.remove('page-moveUp'); 
 
     nextToOpen.classList.remove('page-moveUp'); 
 
     }); 
 
     visibleElement.classList.add('page-moveUp'); 
 
     nextToOpen.classList.add('page-visible'); 
 
     nextToOpen.classList.add('page-moveUp'); 
 
    } 
 
}

.page{ 
 
    display: none; 
 
    overflow: hidden; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    justify-content: center; 
 
} 
 
.page-moveUp { 
 
    animation: moveUp .6s ease both; 
 
} 
 
@keyframes moveUp { 
 
    from { } 
 
    to { transform: translateY(-100%); } 
 
} 
 

 
.page-visible { 
 
    display: block; 
 
} 
 
.one { 
 
    background:pink; 
 
} 
 
.two { 
 
    background:green; 
 
} 
 
.icon-arrow-down2{ 
 
    font-size: 60px; 
 
    color: silver; 
 
    margin-bottom: 50px; 
 
} 
 
.btn-arrow{ 
 
    background-color : rgb(255, 238, 192); 
 
    height: 20px; 
 
    width: 50px; 
 
    box-shadow: none; 
 
    border: none; 
 
} 
 
.btn-arrow:hover{  
 
    border: none; 
 
} 
 
button, 
 
button:active, 
 
button:focus { 
 
    outline: none; 
 
}

<div class="big"> 
 
    <button class="btn-arrow"> 
 
     <span class="icon-arrow-down2"></span> 
 
    </button> 
 
    <div class="page page-visible one"></div> 
 
    <div class="page two"></div> 
 
</div>