Question

我正在尝试根据页面滚动的位置创建一个移动和隐藏某些文本的函数。如果页面向下滚动超过某个点，那么＆＃34; fadeup＆＃34;触发动画并且＃＃;＃first-header＆＃34;失去其不透明度并在1秒内向上移动（translateY）。

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

然而，在＆＃34; fadeup-reverse＆＃34;动画被触发，它以#first-header元素在页面上略低于页面加载时结束。此外，触发＆＃34; fadeup＆＃34;函数随后使＃first-header＆＃34; jump＆＃34;在动画触发它向上移动并失去不透明度之前，直到它最初位于页面加载的位置。

我的问题是，为什么＃first-header＆＃34;在＆＃34; fadeup-reverse＆＃34;之后重新出现的元素被移动低于指定的元素。动画，我该如何预防呢？

我的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>

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

1 个答案: