收起/展开效果，display和transition不能一同使用

最新推荐文章于 2024-07-09 15:59:19 发布
最新推荐文章于 2024-07-09 15:59:19 发布
阅读量458 收藏
点赞数 1
分类专栏： # 工作中遇到的坑 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41923266/article/details/126594775
版权

需求效果

在这里插入图片描述
习惯性想到display:none控制显示/隐藏，再加个transition过渡效果；结果发现transition不起作用。

transition对display:none;无效的原因

display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

解决方案

  1. 使用visibility替代display
    visibility:hidden的时候元素任然存在于文档流中，同时visibility:hidden对应的数值0，visibility:visible对应的数值1，transition属性可以对0～1之间进行过渡。

  2. 改变宽/高为0达到显示/隐藏的效果

我只想卷死各位或者被各位卷死
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
transition 动画与 display: none 冲突的问题
天空之上有座城
02-24 7376
几种元素消失的属性 display: none; 元素消失，不占位。 visibility: hidden; 元素消失， 占位。 opacity: 0;透明度设为0， 元素看不见，占位。 width: 0;宽度设为0 ， 元素看不见，不占位。 问题 transition与display搭配使用时，会导致过渡消失，直接呈现或者消失元素，可能是transition过渡不支持display的...
震惊！！！一眼就能看懂的transition与display冲突问题！！！！
m0_52009348的博客
07-12 359
transition与display冲突问题 问题：在使用dispaly:none(block)对div的显示隐藏应用于过渡属性上时，但是transition完全失效，没有过渡效果 原因：display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素，transition属性无法对一个从无到有的元素进行过渡显示 解决方法: （1）使用visibility代替display,visibility:hidden的时候元素任然存在于文档流中，同时visibil
CSS技巧篇(一)：transition与display冲突问题
madman0621的博客
09-05 6815
问题 使用transition对div的隐藏与显示进行过渡，但是transition完全失效，没有过渡效果。 See the Pen VGWKWm by madman0621 (@madman0621) on CodePen. div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transiti...
transition设置display过渡无效
友人C君的博客
04-16 9001
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 原因 display:none的时候，页面文档流中将不会存在该元素，display:block...
css中动画和display踩过的坑
qq_43427385的博客
09-18 1684
动画的过渡效果一遇到display就没有效果，是因为： display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 所以display做不了过渡效果，但是可以有其他的办法做过渡效果 解决办法: 1，依然用display，但是在js中加setTimeout延迟一下 2，用opac...
(30条消息) display中的transition实现
jiaoqi6132的博客
09-17 1098
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而display这个属性比较尴尬，两种状态，要么显示，要么隐藏，因此无法应用transition效果。 ..
display和transition过渡冲突 元素移动显现消失的解决方案
Noctis99的博客
09-05 1263
v
display中的transition实现
热门推荐
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
vue2.0 中使用transition实现动画效果使用心得
10-18
这篇文章将深入探讨如何使用`<transition>`实现动画效果，通过四个实践案例帮助理解其核心概念。 **1. CSS过渡** Vue中的CSS过渡允许我们为组件的进入和离开状态定义不同的样式。在示例中，当按钮被点击时，`.menu...
CSS3使用transition属性实现过渡效果
09-24
对于不支持`transition`的旧版浏览器，如IE9及更早版本，过渡效果将无法呈现。 过渡效果的触发通常是通过用户的交互，如鼠标悬停(`:hover`)、元素获取焦点(`:focus`)或被激活(`:active`)。这意味着你需要先定义好...
展开与收起效果JS网页特效
11-11
在网页设计中，"展开与收起效果"是一种常见的交互元素，主要用于节省页面空间并提高用户体验。这种特效通常应用于导航菜单、文章摘要、评论列表等地方，让用户能够自由选择是否查看详细内容。JavaScript（JS）作为...
jquery css 展开 收起 效果 仿京东
08-15
通过这两个文件，开发者可以参考和学习如何构建类似的展开收起效果，从而提升自己的网页交互设计能力。 总结起来，这个项目展示了如何利用简单的CSS和jQuery实现一个高效、兼容多种浏览器的展开收起功能，这对于...
基于vue展开收起动画的示例代码
08-27
在这个示例代码中，我们使用了 `<transition>` 组件来实现展开收起动画的效果。`<transition>` 组件的 `name` 属性指定了动画的名称，在这里是 `draw`。这将在后面 CSS 部分中使用。 二、 CSS 动画 在 CSS 部分，...
transition与display冲突的说明及解决办法
weixin_43313076的博客
03-12 1689
transition属性的作用就是用来达到一个过度的效果 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 display 属性表示用来显...
css3中transition和display的坑
muli`慕李
05-14 899
不知道大家做css3动画的时候遇到过这种情景没？ 用opacity实现淡入淡出的效果。一切正常，没什么问题 例： <!DOCTYPE html> <html> <meta charset="uft-8"> <head> <style> .div1{ background: red; } .div2 { width:100px; height:100px; background:blue; tr
display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题
韩旭的博客
05-10 7495
文章目录一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别？3.2 如何不让其占据页面位置？ 一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。 当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。 二、直接采用display:none;display:block;过渡
display与transition动画冲突问题
lemossrkilakila
05-04 764
display与transition动画冲突 延时 timeout requestAnimationFrame 替代 absolute visibility opacity keyframe
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
最新发布
朝阳39的博客
07-09 601
仅对已定位的元素（）有效，默认值为0，可以为负值。
前端实现效果 展开和收取 按钮点击展开收起
04-27
最后，我们可以使用 CSS 来定义 `show` 类的样式，使得内容显示出来，并且添加一个过渡动画来实现平滑的展开和收取效果。 ```css #toggle-content { max-height: 0; overflow: hidden; transition: max-height ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值