CSS动画以意想不到的方式移动元素

Question

我想创建一个基于页面滚动的位置来移动和隐藏一些文本的函数。如果页面向下滚动超过某个点，则会触发“fadeup”动画，并且“＃first-header”失去其不透明度并在1秒内向上移动（translateY）。

然后，如果页面滚动向上经过触发“fadeup”动画以触发“＃first-header”元素上的“fadeup-reverse”动画的点，该元素与fadeup相反动画（赋予元素不透明度并在相反方向使用translateY属性）。

但是，触发“fadeup-reverse”动画后，页面上的＃first-header元素略低于页面加载时的结尾。此外，触发“淡入淡出”功能随后使＃首标头“跳转”到其在页面加载时最初位于动画触发其上移并失去不透明度之前的位置。

我的问题是，为什么是排名第一头”元素移动一旦后重新出现低于指定值‘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转换来简化整个事情，并应用一个可以动画的类，然后删除该类。

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>