反向平滑 CSS 动画

Question

我最近遇到了 GotoMeeting's website and I was very taken with the animated footer that slides away after you scroll down a bit. I wanted to re-create it myself and I mostly have it working. Here is my fiddle。我遇到的问题是，当您向上滚动它时 'snaps' 到位而不是动画备份。我该怎么做才能解决这个问题？

这也是我的代码。

<html>
  <head>
    <style>
      body {
        width:100%;
        height:1600px;
        margin:0;
      }
      #bar {
        position:fixed;
        bottom:0;
        width:100%;
        height:100px;
        background-color:gray;
      }
      @-webkit-keyframes slideout {
        0% {
          -webkit-transform:translateY(0);
          transform:translateY(0);
        }
        100% {
          visibility:hidden;
          -webkit-transform:translateY(100%);
          transform:translateY(100%);
        }
      }
      @keyframes slideout {
        0% {
          -webkit-transform:translateY(0);
          transform:translateY(0);
        }
        100% {
          visibility:hidden;
          -webkit-transform:translateY(100%);
          transform:translateY(100%);
        }
      }
      .slide-down {
        -webkit-animation-duration:3s;
        -webkit-animation-fill-mode:both;
        -webkit-animation-name:slideout;
        animation-duration:3s;
        animation-fill-mode:both;
        animation-name:slideout;
      }
      @-webkit-keyframes slidein {
        0% {
          visibility:visible;
          -webkit-transform:translateY(-100%);
          transform:translateY(-100%);
        }
        100% {
          -webkit-transform:translateY(0);
          transform:translateY(0);
        }
      }
      @keyframes slidein {
        0% {
          visibility:visible;
          -webkit-transform:translateY(-100%);
          transform:translateY(-100%);
        }
        100% {
          -webkit-transform:translateY(0);
          transform:translateY(0);
        }
      }
      .slide-up {
        -webkit-animation-duration:6s;
        -webkit-animation-fill-mode:both: -webkit-animation-name:slidein;
        animation-duration:6s;
        animation-fill-mode:both: animation-name:slidein;
      }
    </style>
    <script type="text/javascript">
      function onScrollBody() {
        var doc = document.documentElement;
        var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
        document.getElementById("scrollinfo").innerHTML = top;
        if (top > 200) document.getElementById("bar").className = "slide-down";
        else if (top < 200) document.getElementById("bar").className = "slide-up";
      }
    </script>
  </head>
  <body onscroll="onScrollBody()">
    <div id="bar">
      <p>TRY FOR FREE</p>
      <p id="scrollinfo"></p>
    </div>
  </body>
</html>

Answer 1

由于您只是将单个属性从 0% 设置为动画，我只推荐使用 transition，它会在属性更改其值时自动设置动画.这样，您只需要 add/remove 一个设置新值的 CSS class 并且更改将根据您的需要进行动画处理。

我更新了所以你可以明白我的意思：

window.onscroll = onScrollBody;

function onScrollBody() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    document.getElementById("scrollinfo").innerHTML = top;
    if (top > 200) document.getElementById("bar").className = "slide-down";
    else if (top < 200) document.getElementById("bar").className = "";
    //var nYScroll = document.body.scrollTop;
    //document.getElementById("scrollinfo").innerHTML = nYScroll;
    //if (nYScroll > 200) document.getElementById("bar").className = "slide-down";
    //else if (nYScroll < 200) document.getElementById("bar").className = "slide-up";
}

body {
    width:100%;
    height:1600px;
    margin:0;
}
#bar {
    position:fixed;
    bottom:0;
    width:100%;
    height:100px;
    background-color:gray;
    transition: transform 1s ease-out;
    -webkit-transition: transform 1s ease-out;
}
.slide-down {
    -webkit-transform:translateY(100%);
    transform:translateY(100%);
}

<body onscroll="onScrollBody()">
    <div id="bar">
        <p>TRY FOR FREE</p>
        <p id="scrollinfo"></p>
    </div>
</body>

反向平滑 CSS 动画

Smooth CSS animation in reverse

javascript

html

css

css-animations