我可以为CSS网格布局组件设置动画吗?

时间:2017-12-20 11:29:26

标签: css reactjs css3 animation css-grid

是否有办法为使用CSS网格布局显示的数组中组件的更改顺序设置动画?

这是一个简短的boilerplate

3 个答案:

答案 0 :(得分:6)

NO。

  

根据CSS Grid Layout Module Level 1 specification,有5个可动画的网格属性:

     

grid-gap, grid-row-gap, grid-column-gap   作为长度,百分比或计算

     

grid-template-columns, grid-template-rows   作为长度,百分比或计算的简单列表,前提是唯一的差异是列表中长度,百分比或计算组件的值。

     

Source

答案 1 :(得分:0)

如果您只是希望用户看到文本的更改,您可以让javascript,替换每个div的文本。在这种情况下,div虽然是相同的(例如div-1,div-2,div-3)。你只会改变文字。

如果你想改变完整div +内容(在html中)的位置及其css属性进行更改,那么你必须扩展javascript以获得一个带3个值的函数并随机按顺序排列,(例如, 1,3,2)。通过javascript,您可以根据需要删除并创建div。

答案 2 :(得分:-1)

是的,在Firefox v66中受支持