CSS 绝对定位和相对定位之间的转换

Question

是否可以将 position:relative 和 position:absolute 与平滑的 CSS 转换结合起来？

我正在创建一个小部件（我称之为 Deck），我不希望它具有折叠和展开状态。到目前为止一切都很好，一切正常。

两种状态之间的切换自然需要过渡动画。这也有效，但不是我想要的方式。我想使用 CSS 转换，而不是像我现在那样使用绝对定位和 JavaScript。

当前的情况是：在展开状态下，牌组中的牌总是绝对定位的，它们的位置是在添加到牌组时动态计算的。折叠时，前四张卡以层叠方式堆叠，其余的位于第四张卡的顶部。在视觉上模仿一堆或一堆。

这种方法的问题是，我不能依赖正常的布局流程来定位卡片，这由于多种原因而很糟糕。如果我对处于展开状态的卡片使用 position:relative ，它们会一个接一个地很好地流动。但向折叠状态的过渡并不是动画的 - 只是瞬间从一个位置快速切换到另一个位置。这当然是合乎逻辑的，因为首先没有绝对定位，浏览器不知道过渡应该从哪里开始。

在我的完美世界中，将类 collapsed 添加到 div.deck-container 会将卡片动画化到折叠位置，反之亦然，但这似乎是不可能的。请有人告诉我我错了。

$('button#toggler').click(function() {
  $('div.deck-container').toggleClass('collapsed');
});

div.deck-container {
  position: relative;
}

div.deck-container li {
  display: inline-block;
  position: relative;
  transition: all 0.5s ease-in-out;

  border: 1px solid black;
  padding: 3px;
  background-color: #fff;
}

div.deck-container.collapsed li {
  position: absolute;
  left: 9px;
  top: 6px;
}

div.deck-container.collapsed li:first-child {
  left: 0;
  top: 0px;
}

div.deck-container.collapsed li:nth-child(2) {
  left: 3px;
  top: 2px;
}

div.deck-container.collapsed li:nth-child(3) {
  left: 6px;
  top: 4px;
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
}

<div class="deck-container">
  <ul>
    <li>Card 1</li>
    <li>Card 2</li>
    <li>Card 3</li>
    <li>Card 4</li>
    <li>Card 5</li>
  </ul>
</div>

<button id="toggler">Toggle state</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

不，您无法为 position 属性设置动画。您只能为一些 css 属性设置动画，并且大多数都将数字或颜色作为值（有一些例外）。您可以在 w3c css 过渡规范中查看此列表。

无论如何，由于您可以为 top 和 left 属性设置动画，因此您可以稍微更改标记以实现效果。

我只是将原始位置设置为绝对位置并定位这些元素。然后，当切换类时，只有 top 和 left 属性发生变化，因此转换有效。

$('button#toggler').click(function() {
  $('div.deck-container').toggleClass('collapsed');
});

div.deck-container {
  position: relative;
}

div.deck-container li {
  background-color: #fff;
  position: absolute;
  border: 1px solid black;
  padding: 3px;
  display: inline-block;
  transition: all 0.5s ease-in-out;
}

div.deck-container li {
  left: 160px;
  top: 0px;
}

div.deck-container li:first-child {
  left: 0px;
  top: 0px;
}

div.deck-container li:nth-child(2) {
  left: 40px;
  top: 0px;
}

div.deck-container li:nth-child(3) {
  left: 80px;
  top: 0px;
}

div.deck-container li:nth-child(4) {
  left: 120px;
  top: 0px;
}

div.deck-container.collapsed li {
  left: 12px;
  top: 8px;
}

div.deck-container.collapsed li:first-child {
  left: 0;
  top: 0px;
}

div.deck-container.collapsed li:nth-child(2) {
  left: 3px;
  top: 2px;
}

div.deck-container.collapsed li:nth-child(3) {
  left: 6px;
  top: 4px;
}

div.deck-container.collapsed li:nth-child(4) {
  left: 9px;
  top: 6px;
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
}

<div class="deck-container">
  <ul>
    <li>Card 1</li>
    <li>Card 2</li>
    <li>Card 3</li>
    <li>Card 4</li>
    <li>Card 5</li>
  </ul>
</div>

<button id="toggler">Toggle state</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

也许你可以使用 translate 代替：

$('button#toggler').click(function() {
  $('div.deck-container').toggleClass('collapsed');
});

div.deck-container li {
  background-color: #fff;
  border: 1px solid black;
  padding: 3px;
  display: inline-block;
  transition: all 0.5s ease-in-out;
}

div.deck-container.collapsed li:first-child {
  transform: translate(0, 0);
}

div.deck-container.collapsed li:nth-child(2) {
  transform: translate(-100%, 2px);
}

div.deck-container.collapsed li:nth-child(3) {
  transform: translate(-200%, 4px);
}

button {
  position: absolute;
  top: 50px;
  left: 50px;
}

<div class="deck-container">
  <ul>
    <li>Card 1</li>
    <li>Card 2</li>
    <li>Card 3</li>
  </ul>
</div>

<button id="toggler">Toggle state</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>