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

即保留数值型位置值

相关推荐
前端小臻19 分钟前
关于css中bfc的理解
前端·css·bfc
前端熊猫22 分钟前
CSS Grid 布局学习笔记
css·笔记·学习·grid
Ama_tor26 分钟前
网页制作05-html,css,javascript初认识のhtml表格的创建
javascript·css·html
白嫖不白嫖30 分钟前
网页版的俄罗斯方块
前端·javascript·css
HappyAcmen32 分钟前
关于Flutter前端面试题及其答案解析
前端·flutter
饼干饿死了32 分钟前
实现动态翻转时钟效果的 HTML、CSS 和 JavaScript,附源码
javascript·css·html
白嫖不白嫖32 分钟前
小游戏-记忆卡牌
css·html·css3
顾比魁33 分钟前
pikachu之CSRF防御:给你的请求加上“网络身份证”
前端·网络·网络安全·csrf
林的快手35 分钟前
CSS文本属性
前端·javascript·css·chrome·node.js·css3·html5
肥肠可耐的西西公主2 小时前
前端(AJAX)学习笔记(CLASS 2):图书管理案例以及图片上传
前端·笔记·学习