css: 针对属性left/right/top/bottom为啥设置transition动画不起作用

如题:

在css的position中 left/right/top/bottom 这类位置属性值如果考虑使用transition来添加动画,transition它会优先考虑left/top属性,而此时transition触发需要的是数值型属性,如果设置为'auto'则系统会默认不考虑将位置属性添加到动画transition中,即代码:

javascript 复制代码
     draggableDiv.value.style.left = 'auto'
     draggableDiv.value.style.right = '0px'

不会生效,如果想让动画生效需要修改为:

javascript 复制代码
	draggableDiv.value.style.left = window.innerWidth - divWidth + 'px';

即保留数值型位置值

相关推荐
Y3815326626 分钟前
body-upload-js
前端·javascript·浏览器·深拷贝·数据克隆
Apifox10 分钟前
Apifox 8 月更新|调试、权限与协作体验持续优化
前端·后端·测试
杉氧12 分钟前
React 灵魂:深入剖析 Hooks 与副作用(Side Effects)陷阱
android·前端·react native
Json____15 分钟前
java-宿舍安全卫生检查系统项目源码
java·前端·javascript·课程设计·it学习·wwwoop.com
lichenyang45326 分钟前
鸿蒙ArkUI 键盘避让终极踩坑指南:RESIZE 无效、Column 布局遮挡、折叠屏适配全解
前端
爱勇宝36 分钟前
公司没给活干,却因为员工看手机把人开了:法院判赔11万元
前端·后端·程序员
Patrick_Wilson37 分钟前
iOS Safari 按钮点击无响应问题修复指南
前端·ios·safari
Csvn1 小时前
模块化与工程化:CJS / ESM / 打包器,到底怎么协作?
前端
hunterandroid1 小时前
[鸿蒙从零到一] ArkTS Sendable 数据模型与跨线程共享实战
前端
AICoder码农王1 小时前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架