Question

我有一个div，其fixed位置可以在点击时向上/向下滑动。我试图使用平滑的CSS transition来实现它，但它只在单击时向上/向下跳转。我可能错过了一些明显的东西，但无法弄清楚是什么。

有什么想法吗？

我的CSS：

  .wrapper {
      position: fixed;
      bottom: 30px;
      top: initial;
      background: green;
      width: 100%;
      height: 20px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
  }
  .wrapper.slide-up {
      top: 0px;
      bottom: initial;
  }
  .wrapper.slide-down {
      top: auto;
      bottom: 36px;
  }

我的JS：

  var wrapper = $('.wrapper');

  $(wrapper).click(

  function () {
      if (wrapper.hasClass('slide-up')) {
          wrapper.addClass('slide-down').removeClass('slide-up');
      } else {
          wrapper.removeClass('slide-down').addClass('slide-up');
      }
  });

Answer 1

我认为原因是从0转移到auto值。您必须在两种情况下指定数字，请参阅fiddle。

我只改变了CSS：您可以仅根据top

计算两个班级的位置

.wrapper.slide-up {
    top: 0px;
}
.wrapper.slide-down {
    top: calc(100% - 20px);
}

也许它对你的商业案例不起作用，但对于这个例子它确实如此。

顺便说一下20px中的calc(100% - 20px)是块的高度。

Answer 2

您不能互换使用top和bottom。你需要改变一种风格。

例如：

.wrapper.slide-up {
  top: 0px;
}
.wrapper.slide-down {
   top: calc(100% - 36px);
}

JSFiddle

您可以使用calc css函数准确计算出您需要的内容。

top: calc(100% - 36px);

但是你需要确保在进行转换时，将它保留在一个需要更改的元素上。因此top会在您有两个不同的top值时为其提供动画，但是当您在未设置时引入bottom时，它将只是“跳转”。

使用calc()时要小心，因为旧浏览器不完全支持它：

Can I use - Calc()

Answer 3

如果符合您的需要，请检查这个小提琴：https://jsfiddle.net/8d19f59q/12/

top: calc(100vh - 20px - 36px);

这就成了伎俩...

单击时更改CSS转换中的底部和顶部值

3 个答案: