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

即保留数值型位置值

相关推荐
Jinxiansen02113 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边8 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客8 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8888 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家8 小时前
微信小店与微信小程序简单集成指南
前端