CSS转换混合绝对和相对定位 [英] CSS transitions mixing absolute and relative positioning
问题描述
简短版本：
可以结合 position：relative 和
详细版本：
$ b
我创建一个小部件（我称之为一个甲板），我不能够有一个折叠和展开状态。所有到目前为止，这是工作正常。
在两个状态之间切换，自然保证过渡动画。这也是工作，但不是我想要的方式实现的方式。我想做的是使用CSS转换，而不是使用JavaScript的绝对定位，就像我现在。
唉，目前的情况是，状态卡在卡座总是绝对位置，他们的位置是在飞行中计算，因为他们被添加到甲板上。当折叠时，前四个以级联方式堆叠，其余四个在第四卡的顶部。
这种方法的问题是，我不能依靠正常的布局流程来定位卡，这是很多原因。如果对于展开状态的卡使用 position：relative ，它们会一个接一个地流动。但是，转换到折叠状态不是动画 - 只是瞬间从一个位置到另一个位置。这是逻辑的，因为没有绝对定位在第一位，浏览器显然不知道从哪里转换。
我到目前为止是这个（小提琴）：
CSS（仅限相关规则）：
div.deck-container {
position：relative;
}
div.deck-container li {
display：inline-block;
position：relative;
-webkit-transition：all 0.5s ease-in-out;
-moz-transition：all 0.5s ease-in-out;
-o-transition：all 0.5s ease-in-out;
-ms-transition：all 0.5s ease-in-out;
transition：all 0.5s ease-in-out;
}
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;
}
HTML（仅限相关标记）：
< div class =deck-container>
< ul>
< li>卡1< / li>
< li>卡2< / li>
< li>卡3< / li>
< li>卡4< / li>
< li>卡5< / li>
< / ul>
< / div>
在我的完美世界中，添加类 collapsed 到 div.deck-container 会使卡动画到它们的折叠位置，反之亦然，但似乎这是不可能的。
不，您不能为位置设置动画。
无论如何，由于你可以动画顶部和左改变您的标记一点，以达到效果，如在这个小提琴。
div.deck-container {
position：relative;
}
div.deck-container li {
background-color：#fff;
position：absolute;
border：1px solid black;
padding：3px;
display：inline-block;
-webkit-transition：all 0.5s ease-in-out;
-moz-transition：all 0.5s ease-in-out;
-o-transition：all 0.5s ease-in-out;
-ms-transition：all 0.5s ease-in-out;
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;
}
我只是将原始位置设置为absolute并定位这些元素。然后，当切换类时，只有 top 和 left 属性发生变化，因此转换可以工作。
Short and sweet version:
Is it possible to combine position: relative and position: absolute with smooth CSS-transitions?
Verbose version:
I'm creating a small widget (I call it a Deck), which I wan't to be able to have a collapsed and expanded state. All well so far, this is working fine.
Switching between the two states, naturally warrants a transition animation. This is working too, but not the way I would like it to be realized. What I would like to do, is use CSS-transitioning, instead of using absolute positioning using JavaScript, like I am now.
Alas, the current scenario is, in expanded state the cards in the deck are always positioned absolutely, their position being calculated on the fly as they are added to the deck. When collapsing, the first four are stacked in a cascading manner and the rest on top of the fourth card. Visually mimicking a stack.
The problem with this approach is that I can't rely on normal layout flow for positioning the cards, which sucks for many reasons. If I use position: relative for the cards in expanded state, they flow nicely one after another. But the transition to collapsed state is not being animated - simply snapping from one position to the other in an instant. This is ofcourse logical since without absolute positioning in the first place, the browser clearly doesn't know from where to transition from.
What I have so far is this (Fiddle):
CSS (relevant rules only):
div.deck-container {
position: relative;
}
div.deck-container li {
display: inline-block;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
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;
}
HTML (relevant markup only):
<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>
In my perfect world, adding the class collapsed to div.deck-container would animate the cards into their collapsed positions and vice versa, but it seems this isn't possible. Please someone tell me I'm wrong.
No, you can't animate the position property. There are only a number of css properties you can animate, and most of them have numbers or colors as values (With some exceptions). You can see this list in the w3c css transitions especification.
Anyway, since you can animate top and left properties, you could change your markup a little to achieve the effect, as in this fiddle.
div.deck-container {
position: relative;
}
div.deck-container li {
background-color: #fff;
position: absolute;
border: 1px solid black;
padding: 3px;
display: inline-block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
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;
}
I just set the original position to absolute and positioned those elements. Then, when toggling the class, only topand left attributes change, so the transition works.
这篇关于CSS转换混合绝对和相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
