加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 在flexbox订单上使用转换

发布时间:2020-12-14 18:51:08 所属栏目:资源 来源:网络整理
导读:有没有办法按照弹性箱项目的顺序进行过渡? 换句话说,我可以有这个(这个fiddle的细节) #container { display: flex;}#container:hover div:last-child { order: -1;} 动画(获得新职位的元素假定它是一段时间的位置)请问? 解决方法 可悲的是:order属性是动
有没有办法按照弹性箱项目的顺序进行过渡?

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

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

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

解决方法

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读