css: 针对属性left/right/top/bottom为啥设置transition动画不起作用

news/2025/2/18 11:17:09/

如题:
css的position中 left/right/top/bottom 这类位置属性值如果考虑使用transition来添加动画,transition它会优先考虑left/top属性,而此时transition触发需要的是数值型属性,如果设置为'auto'则系统会默认不考虑将位置属性添加到动画transition中,即代码:

     draggableDiv.value.style.left = 'auto'draggableDiv.value.style.right = '0px'

不会生效,如果想让动画生效需要修改为:

	draggableDiv.value.style.left = window.innerWidth - divWidth + 'px';

即保留数值型位置值


http://www.ppmy.cn/news/1571900.html

相关文章

IIC总线,也称为I²C或Inter-Integrated Circuit协议

概述 IIC总线发展历程 早期起源 1980年:飞利浦公司(现恩智浦半导体)开始研发一种用于低速设备通信的总线技术,目标是减少电子产品内部的布线复杂性。 1982年:I2C总线的原始版本发布,支持100kHz的通信速率…

MongoDB 的批量查找符号

一、$in 操作符 1. 功能 $in 操作符用于匹配字段值等于指定数组中任意值的文档,能批量查找多个特定值的文档。 2. 语法示例 db.collection.find({ field: { $in: [value1, value2, ...] } }); 3. 代码示例 假设有个名为 users 的集合,里面存有用户…

Vue3日历(Calendar)

效果如下图: 在线预览 APIs Calendar 参数说明类型默认值display日历展示方式,面板/卡片‘panel’ | ‘card’‘panel’mode初始模式‘month’ | ‘year’‘month’header自定义日历头部内容string | slotundefinedstartDayOfWeek一周的开始是星期几&…

vue3:动态渲染后端返回的图片

问: div classleft-png 这里我用css设置了他的背景图片,但是现在我希望改为后端返回的图片,怎么写? 后端返回数据: const centerdata {img:;xxxx,title,xxxx,num:xxxx}? 回答: 好的&#xff…

网络工程师 (32)TRUNK

一、定义 TRUNK,也称为端口汇聚、链路汇聚或多链路汇聚,是一种网络技术,其本质是将多个以太网端口绑定在一起作为一个逻辑链路来使用。通过TRUNK技术,用户在使用这个逻辑链路时,就好像是在使用一条独立的物理链路一样&…

使用 LangChain 对接硅基流动(SiliconFlow)API:构建一个智能对话系统

文章目录 什么是硅基流动(SiliconFlow)?LangChain 简介在 LangChain 中对接硅基流动步骤 1:安装必要的库步骤 2:设置 API 密钥步骤 3:编写代码代码解析步骤 4:运行代码如何扩展和改进总结 在现代…

vm vitualbox和主机ssh连接,使用net 和仅主机网卡连接

你是否发生了虚拟机ping通主机,主机ping不同虚拟机的现象 仅主机连接方式 你是否发生了打开防火墙和端口却无论如何都用不了SSH 端口转发 -------------------------------------------------------------- 虚拟机有三种连接方式 桥接 net 仅主机 …

Python教程:@staticmethod静态方法的简单示例

在Python编程语言中,staticmethod 是一个装饰器(decorator),用于声明一个方法为静态方法。静态方法不需要访问类的属性或方法,也不需要实例化类就可以直接通过类名调用。它不接受 self 或 cls 参数,这意味着…