javascript - 我怎样才能顺利地 "pinch"一个包含文本的元素？

Question

我想做什么

我的目标是转换列表，以便在单击某个元素时，它会平滑地上升到列表顶部，成为标题(参见示例)。实际上，它下方会出现一个菜单 UI。我可以将所有元素的高度过渡到除了单击的元素之外，以将其平滑地动画化到列表的顶部。这样可行!但是文本，当容器变得太小时，文本当然就消失了。我的意图是让文字也捏起来。

---

我尝试过的

所以我当然必须使用转换。然而，变换在视觉上挤压容器，但不会物理上改变它所在的空间，因此单击的列表项不会上升到顶部。

最后，当我尝试同时变换容器并将其高度更改为零时，结果并不如预期。转换考虑了高度的变化，此时文本仍然只是消失了。

此外，由于转换实际上考虑了高度变化，因此元素之间似乎形成了间隙，使它们在视觉上的转换速度快于它们的尺寸可以缩小的速度!

---

我的问题

我怎样才能以平滑、流畅的方式同时转换容器并物理地将其高度降低到零，而文本不会在任何时候消失，直到它被捏到零高度(并且过渡期间元素之间没有出现间隙)？

---

示例:

//name variables containing JQuery $...

$('.container').on('mousedown touchstart', function() {
  $allContainersExceptThis = $('.container').not(this);
  if (!this.isSelected) {
    $allContainersExceptThis.css({
      'transform': 'scaleY(0)'
    });
    $(this).css({
      'background-color': 'orange',
      'color': '#FF3300'
    });
    this.isSelected = true;
  } else {
    $allContainersExceptThis.css({
      'transform': ''
    });
    $(this).css({
      'background-color': '',
      'color': ''
    });
    this.isSelected = false;
  }
});

@import url(https://fonts.googleapis.com/css?family=Lobster);
 html,
body,
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  margin: 10px;
  width: 2in;
  height: 3in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  font-family: 'Lobster', cursive;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.wrapper > .container {
  width: 100%;
  height: 0.6in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
.wrapper .container:nth-child(even) {
  background-color: lightgray;
}
.wrapper .container:hover {
  background-color: gray;
  color: white;
}
.wrapper > .container > .name {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  flex: 1;
  justify-content: center;
  pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div id="containerOne" class="container">
    <div class="name">Container One</div>
  </div>
  <div id="containerTwo" class="container">
    <div class="name">Container Two</div>
  </div>
  <div id="containerThree" class="container">
    <div class="name">Container Three</div>
  </div>
  <div id="containerFour" class="container">
    <div class="name">Container Four</div>
  </div>
</div>

Answer 1

也许您正在寻找什么？它是 overflow: visible 与您的转换的组合。

为了更清晰地显示动画，我已经放慢了速度。

编辑:间隙问题通过更改顶部和底部边距而不是高度来解决 - 因为更改高度会使比例变换比原来更小。

//name variables containing JQuery $...

$('.container').on('mousedown touchstart', function() {
  $allContainersExceptThis = $('.container').not(this);
  if (!this.isSelected) {
    $allContainersExceptThis.css({
      'transform': 'scaleY(0)',
      'margin-top': '-0.3in',
      'margin-bottom': '-0.3in'
    });
    $(this).css({
      'background-color': 'orange',
      'color': '#FF3300'
    });
    this.isSelected = true;
  } else {
    $allContainersExceptThis.css({
      'transform': '',
      'margin-top': '',
      'margin-bottom': ''
    });
    $(this).css({
      'background-color': '',
      'color': ''
    });
    this.isSelected = false;
  }
});

@import url(https://fonts.googleapis.com/css?family=Lobster);
 html,
body,
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  margin: 10px;
  width: 2in;
  height: 3in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  font-family: 'Lobster', cursive;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.wrapper > .container {
  width: 100%;
  height: 0.6in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  transition: transform 3s, background-color 3s, color 3s, margin-top 3s, margin-bottom 3s;
  background-color: lightpink;
}
.wrapper .container:nth-child(even) {
  background-color: lightgray;
}
.wrapper .container:hover {
  background-color: gray;
  color: white;
}
.wrapper > .container > .name {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  flex: 1;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div id="containerOne" class="container">
    <div class="name">Container One</div>
  </div>
  <div id="containerTwo" class="container">
    <div class="name">Container Two</div>
  </div>
  <div id="containerThree" class="container">
    <div class="name">Container Three</div>
  </div>
  <div id="containerFour" class="container">
    <div class="name">Container Four</div>
  </div>
</div>