热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

transitiontransform初始display:block怎么就没移动效果?

https://jsfiddle.net/zjmove/2

https://jsfiddle.net/zjmove/2...



---看完xiaoboost的回答---
最后这样改最合适:https://jsfiddle.net/25d3ga9j...
我没说清楚,其实我并不需要next的动画,只需要left从右往左的效果。至于为什么初始display:block就没有动画效果,可能这样初始item就已经显示出来了,force reflow没来得及重绘;display:none就不需要重绘页面了,left时直接从右往左就行了。再次感谢。

--
只能说问题和这个force reflow有关,到底什么原理还是不清楚的。



--不同浏览器差异大啊
上面的改法,在firefox里完美,在chrome57(ubuntu)里鼠标移动会闪动一次

--初始display:block,打印transforms属性,发现force reflow并没有生效。总结一下:display:block并且有过渡效果(transition)时就不生效。
https://jsfiddle.net/25d3ga9j...


   



推荐阅读
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文探讨了Node.js后端开发的基础知识,包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]
  • Docker安全策略与管理
    本文探讨了Docker的安全挑战、核心安全特性及其管理策略,旨在帮助读者深入理解Docker安全机制,并提供实用的安全管理建议。 ... [详细]
  • 使用CSS实现鼠标悬停时图片或按钮的平滑放大效果
    通过CSS技术,当鼠标悬停在图片或按钮上时,可以实现元素平滑放大的视觉效果,并可自由调整动画的持续时间。本文将详细介绍如何利用CSS实现这一功能。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • SDWebImage第三方库学习
    1、基本使用方法异步下载并缓存-(void)sd_setImageWithURL:(nullableNSURL*)urlNS_REFINED_FOR_SWIFT;使用占位图片& ... [详细]
  • 在移动端开发中,多点触控手势是提升用户体验的重要手段。然而,目前只有iOS浏览器原生支持手势事件,其他设备需要通过touchstart、touchmove和touchend等基础事件进行自定义实现。本文将详细介绍如何在Vue项目中实现多点触控手势。 ... [详细]
  • 说明Python教程正在编写中,欢迎大家加微信sinbam提供意见、建议、纠错、催更。drymail是一个邮件发送库,封装了Python的smtplib ... [详细]
  • 本文档提供了 TA-Lib 的安装指南、快速入门、高级应用及各类技术指标的详细介绍。 ... [详细]
  • 在开发一个网页音乐播放器时遇到问题,需要从不同源读取MP3文件的ID3标签信息,包括流派、歌手和歌曲名称等。尝试使用PHP未果后转而考虑使用JavaScript进行跨域读取,但不清楚具体配置方法,寻求技术指导。 ... [详细]
  • 使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件,专用于美化表单元素,操作简便,能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
author-avatar
洱冬橙66_156
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有