CSSアニメーションが不意に動く

Question

ページがスクロールした場所に基づいてテキストを移動および非表示にする関数を作成しようとしています。ページがある点を過ぎてスクロールダウンされると、 "fadeup"アニメーションがトリガーされ、 "＃first-header"は不透明度を失い、1秒間に上に移動します（translateY）。そして

、ページがfadeupの反対をし、「＃第ヘッダ」要素の「fadeupリバース」のアニメーションをトリガーする「fadeup」アニメーションをトリガー点を越えまでスクロールされた場合アニメーション（要素の不透明度を与え、逆方向のtranslateYプロパティを使用します）。

しかし、 "fadeup-reverse"アニメーションがトリガーされた後、＃first-header要素がページの負荷よりもページ上でわずかに低くなって終了します。また、 "fadeup"関数をトリガーすると、＃最初のヘッダーは最初のページの読み込み位置にジャンプしてアニメーションが上に移動して不透明度を失うようになります。

私の質問は、なぜfadeup-リバース 『のアニメーション、そしてどのように私はそれを防ぐん＃最初のヘッダ」、それは後に再表示されたら、指定されたよりも低い移動される要素が』です

私のhtmlの？：

<section id="first-section" class="full-height"> 
    <h1 id="first-header">First Headline</h1> 
</section> 
<section id="second-section" class="full-height"> 
</section> 

マイCSS：

@keyframes fadeup { 
    from { 
     opacity:1; 
    } 
    to { 
     opacity:0; 
     transform:translateY(-50px); 
     -ms-transform:translateY(-50px); 
     -moz-transform:translateY(-50px); 
     -webkit-transform:translateY(-50px); 
    } 
} 
@keyframes fadeup-reverse { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
     transform:translateY(50px); 
     -ms-transform:translateY(50px); 
     -moz-transform:translateY(50px); 
     -webkit-transform:translateY(50px); 
    } 
} 

.fadeup, .fadeup-reverse { 
    animation-duration:1s; 
    animation-fill-mode: forwards; 
    -webkit-animation-duration:1s; 
    -webkit-animation-fill-mode: forwards; 
} 
.fadeup { 
    animation-name:fadeup; 
    -webkit-animation-name:fadeup; 
    -moz-animation-name:fadeup; 

} 
.fadeup-reverse { 
    animation-name:fadeup-reverse; 
    -webkit-animation-name:fadeup-reverse; 
    -moz-animation-name:fadeup-reverse; 

} 

私のjQuery：

$(window).scroll(function() { 
    if ($(window).scrollTop() > 80) { 
     $('#first-header').removeClass("fadeup-reverse"); 
     $('#first-header').addClass("fadeup"); 
    } if ($(window).scrollTop() < 81 && $('#first-header').hasClass("fadeup")) { 
     $('#first-header').removeClass("fadeup"); 
      $('#first-header').addClass("fadeup-reverse"); 
    } 
}); 

Answer 1

.fadeup-reverseアニメーションはtranslateY(50px)に変換/移動するため、translateY(0)ではなく、要素が最初の開始点の下に表示されます。それを0に変更すると、要素は元の位置に戻ります。

しかし、CSSトランジションを使用して.fadeupのアニメーションを実行しているクラスを適用し、そのクラスを削除するだけで、この全体を単純化できます。

var $firstHeader = $('#first-header'); 
 
$(window).scroll(function() { 
 
    if ($(window).scrollTop() > 80) { 
 
    $firstHeader.addClass("fadeup"); 
 
    } 
 
    if ($(window).scrollTop() < 81 && $firstHeader.hasClass("fadeup")) { 
 
    $firstHeader.removeClass("fadeup"); 
 
    } 
 
});

body { 
 
    padding-top: 200px; 
 
    height: 500vh; 
 
} 
 

 
body:after { 
 
    content: ''; 
 
    width: 100px; 
 
    height: 1px; 
 
    background: red; 
 
    position: absolute; 
 
    top: 200px; 
 
} 
 

 
#first-header { 
 
    transition: transform 1s, opacity 1s; 
 
} 
 

 
.fadeup { 
 
    transform: translateY(-50px); 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="first-section" class="full-height"> 
 
    <h1 id="first-header">First Headline</h1> 
 
</section> 
 
<section id="second-section" class="full-height"> 
 
</section>