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

即保留数值型位置值

相关推荐
我命由我123456 小时前
Element Plus 2.2.27 的单选框 Radio 组件,选中一个选项后,全部选项都变为选中状态
开发语言·前端·javascript·html·ecmascript·html5·js
Luna-player6 小时前
第3章 Spring Boot的Web应用支持,个人学习笔记
前端·spring boot·学习
bugcome_com6 小时前
【ASP.NET Web Pages】页面布局核心实战:从复用性到安全性,打造一致化网站界面
前端·后端·asp.net
Sylus_sui6 小时前
Class 模型 + 跨组件状态(@Observed)+ 网络请求封装 + 本地存储全部是鸿蒙 Next/Stage 模型标准写法
前端
代码栈上的思考6 小时前
消息队列持久化:文件存储设计与实现全解析
java·前端·算法
踩着两条虫6 小时前
去“AI味儿”实操手册:从“机器脸”到“高级脸”,只差这三步!
前端·vue.js·ai编程
qq_211387476 小时前
基于LangGraph多agent
开发语言·前端·javascript·agent·langgraph
摸鱼仙人~6 小时前
Vue Todo 实战练习教程(简略版)
前端·javascript·vue.js
dzj8886 小时前
云朵字生成器-html
前端·css·html·云朵字
FlyWIHTSKY7 小时前
Vue 3 单文件组件加载顺序详解
前端·javascript·vue.js