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

即保留数值型位置值

相关推荐
众乐乐_20086 分钟前
Java 后端给前端传Long值,精度丢失的问题与解决
java·前端·状态模式
一叶茶16 分钟前
VsCode和AI的前端使用体验:分别使用了Copilot、通义灵码、iflyCode和Trae
前端·vscode·gpt·ai·chatgpt·copilot·deepseek
熊猫钓鱼>_>22 分钟前
基于MCP的桥梁设计规范智能解析与校审系统构建实践
前端·easyui·设计规范
若初&32 分钟前
文件上传Ⅲ
前端·web安全
若愚679233 分钟前
前端取经路——前端安全:构建坚不可摧的Web应用防线
前端·安全
邪恶的贝利亚37 分钟前
定时器设计
java·linux·前端
inksci1 小时前
Vue 3 打开 el-dialog 时使 el-input 获取焦点
前端·javascript·vue.js
若愚67921 小时前
前端取经路——量子UI:响应式交互新范式
前端·ui·交互
PHASELESS4112 小时前
HTML常用标签用法全解析:构建语义化网页的核心指南
前端·html