使用 flexbox 创建过渡效果

Question

我正在尝试创建一个从弹性框底部弹出的横幅的相当简单的效果。我通过在元素的 bottom 属性上应用过渡来实现这一点（例如，从 -50px 开始并上升到 0）。

我想要实现的是内容占据了整个空间，并且在动画期间它逐渐缩小以为横幅腾出空间（并在横幅离开时重新长出来）。

不幸的是，即使横幅“在”盒子“外面”，内容仍然会缩小，以便为横幅留出空间。我想最好的解释方法是通过演示：

$('#animate').on('click', function(e) {
  $('.banner').toggleClass("show");
});

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 200px;
  height: 200px;
  border: 2px solid;
}

.content {
  height: 100%;
  background: red;
}

.banner {
  position: relative;
  display: block;
  bottom: -60px;
  width: 200px;
  height: 50px;
  background: green;
  transition: bottom 3s ease-out;
}

.banner.show {
  display: block;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content">
    content
  </div>
  <div>
    <div class="banner">
      hello
    </div>
  </div>
</div>
<br>
<br>
<br>
<div id="animate">animate</div>

https://jsfiddle.net/gnmc99mL/3/

Answer 1

这是一个可行的解决方案：

$('#animate').on('click', function(e) {
  $('.banner').toggleClass("show");
});

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border: 2px solid;
}

.content {
  flex: 1;
  background: red;
}

.banner {
  margin-bottom: -50px;
  height: 50px;
  background-color: rgba(0, 128, 0, .5); /* opacity to see behind element */
  transition: margin-bottom 3s ease-out;
}

.banner.show {
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content">content</div>
  <div class="banner">hello</div>
</div>
<br>
<br>
<br>
<div id="animate">animate</div>

jsFiddle demo

---

原代码有两个问题：

1. flex: 1 已应用于弹性容器。 flex 属性仅适用于弹性项目。所以它没有任何效果。

2. 对于position: relative，元素的原始空间始终被保留，无论元素移动到何处。所以内容部分不能侵入横幅空间，因为该空间永远不会被释放。