当前位置: 首页 > news >正文

记录一次el-dialog拖拽用户体验优化

当在项目中对el-dialog通过自定义指令封装了手动拖拽的效果后,发现频繁的触发会有卡顿的现象不利于用户体验,经过尝试下面方法可以使拖拽效果更加丝滑:

1.修改transform不要修改position top left (具体和浏览器的渲染逻辑有关 )

2.需要给拖拽的元素增加will-change:transform

如果拖拽的div内部嵌套内容过多 需要增加transform:translateZ(0)将内部元素单独放在新的GPU层

3.在mousedown 绑定mousemove事件mouseup时 要进行解绑在mousedowne.stopPreventDefault e.stopPropagation阻止其他的冒泡事件 造成性能阻塞

4.mousemove事件里 改变transform时 通过requestAnimationFrame包裹处理 匹配浏览器刷新试图的频率 将动画更加平滑

http://www.cnnetsun.cn/news/101643.html

相关文章:

  • 基于SpringBoot的自动驾驶数据处理任务众包平台系统毕业设计项目源码
  • 基于SpringBoot的养老院管理系统毕业设计项目源码
  • 若是Windows下的HGDB配置参数work_mem>=2GB会导致HGDB服务无法启动
  • 17、使用psad应对网络攻击:原理、配置与实例
  • EmotiVoice能否替代真人配音?实测对比告诉你
  • EmotiVoice语音紧迫感调控适合警报通知
  • vue基于springboot的土壤监测信息采集系统
  • vue基于springboot的小区停车场收费车辆计费管理系统的设计与实现
  • vue基于springboot的文创产品商城众筹平台设计与实现
  • vue基于springboot的物流运输仓储仓库采购信息系统平台的设计与实现
  • 基于SpringBoot的民宿管理系统的设计与实现毕业设计项目源码
  • 基于SpringBoot的民运会赛务管理系统的设计与实现毕业设计项目源码
  • PCB焊锡虚焊排查与预防全攻略
  • 保姆级教程!把AI大模型训练过程揉碎了讲给你听,小白也能秒懂!
  • 4-DE10-Nano的HDMI方块移动案例——I2C通信协议
  • 5款AI写论文哪个好?深度横评后我发现了宏智树AI学术圈隐藏的“六边形战士”
  • 软件测试认证体系全面分析
  • 局域网扫描工具 MyLanViewer v6.7.2 便携版
  • EmotiVoice能否支持实时变声聊天?技术可行性验证
  • 如何提升合成语音的韵律感?EmotiVoice提供完整方案
  • 办公室中的Python课 P03 【数据小仓库】变量与数据类型:文件柜里的不同标签
  • 计算机毕业设计|基于springboot + vue敬老院管理系统(源码+数据库+文档)
  • 基于EmotiVoice的语音合成应用实践全攻略
  • 微爱帮完成数百万种子轮融资,投资方未透露
  • 16、深入了解Linux工作站连接配置
  • 21、Linux 系统打印机配置与网络共享全攻略
  • 【Qt 5.14.2 新手实战】QTC++入门筑基——10 分钟做个文本编辑器:QLineEdit + QTextEdit 核心用法
  • 区块链智能合约测试方法论与实践路径
  • 椭圆曲线的群、子群和阶
  • EmotiVoice如何确保克隆声音不侵犯原声权?