有没有办法在flex-box项目的顺序上进行转换?
换句话说,我可以拥有这个(详情请参阅fiddle)
#container {
display: flex;
}
#container:hover div:last-child {
order: -1;
}
动画(获得新位置的元素会假定它随时间的位置),好吗?
答案 0 :(得分:15)
可悲的是:order属性是可动画的,但仅作为整数。这意味着对于动画的每个步/帧,它将通过拼接到neareast整数来插值。所以项目只会出现在计算整数值产生的槽中,而不会以任何平滑的运动方式介于其间。
技术上它仍然是一个动画:计算出的整数位置仍应遵循动画的计时功能和关键帧规则,只是项目在变化时从一个位置“跳跃”到另一个位置。
请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation
答案 1 :(得分:2)
这个问题现在已经很老了,但是我最近使用了这个小提琴(改编自Jason在评论中发布的那个)来测试了这个问题:http://jsfiddle.net/aqrxcd1u/(下面的代码)。
在 Chrome 和 Firefox 中,该动画都是部分动画的,其顺序是一次从当前值转换为目标值。意思是它不是从5-> 1开始,而是从5-> 4-> 3-> 2-> 1开始。
在桌面版Safari中,它仍然直接运行5-> 1。
#container {
display: flex;
}
#container div {
width: 100px;
height: 100px;
margin-right: 10px;
background-color: red;
}
#container div:nth-child(even) {
background-color: blue;
}
}
#container div:last-child {
order: 5;
transition: order 1s;
}
#container:hover div:last-child {
order: -1 !important;
}
<div id="container">
<div style="order: 1">Element 1A</div>
<div style="order: 2">Element 2B</div>
<div style="order: 3">Element 3C</div>
<div style="order: 4">Element 4D</div>
<div style="order: 5">Element 5E</div>
</div>
答案 2 :(得分:1)
正如埃米尔所说,它只是一个整数的动画。但是,我在想一个黑客:
height
的1/10的包装中,设置包装overflow: visible
height
。 order
和transition
放在所有这些上。 order
并观察其转换&#39;。可悲的是,它的丑陋和仅适用于Firefox 。 Here is what I tested in Angular
答案 3 :(得分:1)
我没有真正回答这个问题,因为我没有使用order属性。
但是我想做一些与您期望的类似的事情,最后决定:
data-order
属性data-order
这里是演示:https://codepen.io/anon/pen/OdgBrg
如果您想为滑块(或其他任何东西)设置动画,但又想保留HTML中元素的顺序以实现可访问性,这可能很有用,这是order属性的一种有用用法。参见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property_and_accessibility