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';

即保留数值型位置值

相关推荐
江米小枣tonylua2 分钟前
TypeScript 全面の拥抱 !Prisma 8 + Electron 升级实战
前端
闪耀之光M7817 分钟前
npm命令解析
前端
咸鱼老弟24 分钟前
AI Agent 的"自主性悖论"——为什么给它的自由度越大,越要配一套更硬的护栏
前端·人工智能
默_笙1 小时前
💫 闭包是个背包:拆解小米前端面试题里的三道"闭包陷阱"
前端·javascript·面试
天若有情6731 小时前
粒子星空背景单页HTML模板|炫酷动态星空特效网页(纯前端)
前端·html·css动画·网页特效·粒子星空·静态网页模版
工业涂料百问1 小时前
【趋势前沿】系列(三)工业涂料国产替代的三个台阶:航空、海工、电子的突破路径与认证壁垒
前端
前端snow1 小时前
ai agent --- agentic RAG
前端
gyratesky2 小时前
记录一种很新的大屏开发方式
前端·数据可视化
xy34533 小时前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计