m0_66532106 2022-01-21 23:55 采纳率: 100%
浏览 39
已结题

刚开始学前端,display:none和transition为什么会冲突啊

刚开始学前端,display:none和transition为什么会冲突啊

  • 写回答

1条回答 默认 最新

  • 前端互助会 2022-01-22 00:02
    关注

    问题
    使用display:none(block)对div的隐藏与显示应用于过渡属性上,但是transition完全失效,没有过渡效果。
    height=“419” width=“700” scrolling=“no” title=“display与transition冲突” src="//codepen.io/madman0621/embed/VGWKWm/?height=419&theme-id=light&default-tab=css,result&embed-version=2" allowfullscreen=“true”>See the Pen display与transition冲突 by madman0621 (@madman0621) on CodePen.
    div元素使用display:none(block)实现隐藏与显示的时候,会与transition属性冲突,导致过渡效果无效。display会破坏transition。
    原因
    display:none的时候,页面文档流中将不会存在该元素,display:block的时候,文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。
    解决方案
    使用visibility替代display
    visibility:hidden的时候元素任然存在于文档流中,同时visibility:hidden对应的数值0,visibility:visible对应的数值1,transition属性可以对0~1之间进行过渡。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 1月30日
  • 已采纳回答 1月22日
  • 创建了问题 1月21日

悬赏问题

  • ¥15 求购HI3519AV100开发板
  • ¥15 请问1553 RT怎么测试,没有BC有方法吗
  • ¥100 业务编程如何选择学习方向和内容?
  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。
  • ¥15 鼠标点击的这条记录了什么?
  • ¥15 在写pid调速的程序时,电机始终维持最大速度
  • ¥15 【有偿】调用DXGI截图初始化失败,提示0xf 887a0004
  • ¥15 请问如何查看手机root记录?
  • ¥15 商城小程序订单号重复
  • ¥15 学校优化算法sbo和蚁群算法怎么结合