html – 在flexbox订单上使用转换

html – 在flexbox订单上使用转换,第1张

概述有没有办法按照d性箱项目的顺序进行过渡? 换句话说,我可以有这个(这个fiddle的细节) #container { display: flex;}#container:hover div:last-child { order: -1;} 动画(获得新职位的元素假定它是一段时间的位置)请问? 可悲的是:order属性是动画的,但只能作为整数.这意味着对于动画的每个步骤/帧,它 有没有办法按照d性箱项目的顺序进行过渡?

换句话说,我可以有这个(这个fiddle的细节)

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

动画(获得新职位的元素假定它是一段时间的位置)请问?

解决方法 可悲的是:order属性是动画的,但只能作为整数.这意味着对于动画的每个步骤/帧,它将通过地板将值插值到neareast整数.因此,项目只会在插槽中显示计算的整数值导致,不会以任何平滑的运动方式中间.

它在技术上仍然是一个动画:计算的整数位置应该遵循动画的时序功能和关键帧规则,只是项目“从某个位置跳转”到位置.

见https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation

总结

以上是内存溢出为你收集整理的html – 在flexbox订单上使用转换全部内容,希望文章能够帮你解决html – 在flexbox订单上使用转换所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1141337.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-31
下一篇2022-05-31

发表评论

登录后才能评论

评论列表(0条)

    保存