CSS3 使用固定的 Flex div 向上滑动和向下滑动

Question

在我的应用程序中的某些位置，我正在添加和删除类is-visible(滑入(和is-hidden(向下滑动(。

我在页面底部有一个使用 flex 的固定div。但是，我的动画不太有效，因为它只向下滑动一半，并留下一半的内容。

至于向上滑动，它根本不会向上滑动。

这是一个演示，如果您检查代码并将上述类名添加到sticky潜水中，您就会明白我的意思。

https://jsfiddle.net/4v36pbdy/

我的动画有误吗？我很困惑，为什么它不起作用。当添加隐藏类时，它应该向下滑动，当它获得可见类时，它应该向上滑动吗？

这是代码：

.sticky {
background: #f5f5f5;
bottom: 0;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.1);
left: 0;
margin: 0;
padding: 8px 16px;
position: fixed;
width: 100vw;
z-index: 444;
align-items: center;
display: flex;
justify-content: space-between;
& .left {
flex-basis: 52%;
}
& .right {
flex: 1 1;
}
&.is-hidden {
max-height: 0;
}
&.is-visible {
max-height: 78px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
}

Answer 1

我在sticky内部创建了一个内部包装器，并将填充属性移动到该容器中而不是外部容器中，并添加了overflow: hidden