在flexbox订单上使用转换

时间:2013-09-17 09:45:20

标签: html css css-transitions flexbox

有没有办法在flex-box项目的顺序上进行转换?

换句话说,我可以拥有这个(详情请参阅fiddle

#container {
    display: flex;
}
#container:hover div:last-child {
    order: -1;
}

动画(获得新位置的元素会假定它随时间的位置),好吗?

4 个答案:

答案 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
  • 然后在这些包装器之间放置9个间隔元素,使用相同的height
  • ordertransition放在所有这些上。
  • 更改包装器的order并观察其转换&#39;。

可悲的是,它的丑陋和仅适用于Firefox Here is what I tested in Angular

答案 3 :(得分:1)

我没有真正回答这个问题,因为我没有使用order属性

但是我想做一些与您期望的类似的事情,最后决定:

  • 在HTML中,向元素添加data-order属性
  • 为每个元素位置添加CSS属性
  • 使用Java脚本更改data-order
  • 使用CSS过渡进行插值

这里是演示: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