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

即保留数值型位置值

相关推荐
粥里有勺糖1 分钟前
视野修炼-技术周刊第122期 | 发光图片制作
前端·javascript·github
Carlos_sam33 分钟前
OpenLayers:封装Tooltip
前端·javascript
工呈士1 小时前
MobX与响应式编程实践
前端·react.js·面试
嘉小华1 小时前
Android Lifecycle 使用
前端
Sherry0071 小时前
实时数据传输协议:WebSocket vs MQTT
前端·websocket
然我1 小时前
JavaScript的OOP独特之道:从原型继承到class语法
前端·javascript·html
腹黑天蝎座1 小时前
如何更好的实现业务中图片批量上传需求
前端
嘉小华1 小时前
Android Lifecycle 源码解析
前端
木木夕酱1 小时前
前端响应式网站编写套路
css·react.js
不_喜1 小时前
游戏开发零散知识点和优化记录
前端