Question

我正在构建一个应该根据某些用户操作上下滑动的组件。组件必须在顶部放置一个图像，该图像位于绝对位置，位于固定的包装纸上。

一切都很好，但是在上下滑动效果期间，我使用的是jQuery，只显示了图像的下半部分。当动画结束时，图像会按照它应该显示的方式显示。

我有一些CSS看起来像：

.wrapper {
  background: #fff;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 100px;
  display: none;
}

.picture {
  position: absolute;
  top: -40px;
  border-radius: 100%;
  left: 50%;
  transform: translateX(-50%);
}

我在这里做了一个小提琴：https://jsfiddle.net/7sg3x6zn/

关于如何避免这种情况的任何想法？

Answer 1

添加

overflow: initial !important;

以包装类为例 https://jsfiddle.net/RACCH/ug7szyzv/

这种情况正在发生，因为jquery函数在动画期间添加了overflow：hidden ..

Answer 2

正如其他人提到的，你需要覆盖在slideDown（）和slideUp（）的回调中设置的overflow：hidden。

如果您更改代码，则可以在不更改样式表的情况下执行此操作：

$(function() {

    $('#show').click(function(event) {
    event.preventDefault();
    $('.wrapper').slideDown().css('overflow','visible');
  });

  $('#hide').click(function(event) {
    event.preventDefault();
    $('.wrapper').slideUp().css('overflow','visible');
  });

});

Answer 3

动画slideDown，slideUp在执行动画的包装元素上使用overflow: hidden。

由于图像的负顶部位置在包装器之外。因此，要避免将图像切成两半，请删除以下行：top: -40px

希望这有意义:)）

位置绝对图像仅在动画期间显示一半

3 个答案: