css中transition和display的坑

最新推荐文章于 2024-05-18 22:24:22 发布
最新推荐文章于 2024-05-18 22:24:22 发布
阅读量336 收藏
点赞数
分类专栏： HTMl5 css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56845026/article/details/134652162
版权
HTMl5 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

css中transition和display的坑

看看GPT分析的原因

image-20231127182121831

原因

动画的过渡效果一遇到display就没有效果，是因为：
display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

所以display做不了过渡效果，但是可以有其他的办法做过渡效果

解决办法

1，依然用display，但是在js中加setTimeout延迟一下
2，用opactiy，0和1是有过渡效果的
3，用visibility,visible就相当于1，hidden相当于0

本来单独用opacity也可以达到视觉上的效果，但是会遮挡住下面的dom的点击操作。但是用display属性又会破坏整个延迟效果。所以用visibility属性。当visibility为hidden是为隐藏当visibility为visible时候显示

喜溯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3实现鼠标悬停提示气泡效果
12-08
<!DOCTYPE HTML> <html> <head> <title>CSS3制作鼠标悬停提示气泡内容菜单</title> <style type=”text/css”> body{ background:#D6D3C9; color:#383835; font-family:Arial, Arial, Helvetica, sans-serif; } #bubblemenu li { display: i
CSS中下拉菜单和表单以及弹出层的简单笔记
12-13
下拉菜单     display：block，盒子会由收缩包围元素变为扩展填充父元素    position：absolute是相对于父元素的绝对位置，其坐标都是相对于父元素的，比如对齐下拉菜单 CSS Code复制内容到剪贴板 .mene li ul{        display:block;        position:absolute;        left:0;        top:100%;    }   表单     input的type：    text：基本的单行文本框。    password：文本显示为掩码。   
面试官:css中display属性和transition属性冲突 如何解决?
weixin_43321726的博客
02-16 771
面试官:我想要设置过渡属性 ， 但是我使用了display：none;导致该效果无法生效,该如何解决? 张三:display:none的时候,元素从页面文档中消失了，display:block才会显示。transition无法对一个时有时无的元素进行过渡效果。可以用visibility或者opacity替代display .box { width: 100px; height: 100px; background-color: yellow; // display: none; opac
CSS小技巧---display显隐动画效果
勤学daydayup的博客
07-16 8448
今天记录一个css小技巧 既不用setTimeout 也不用监听transitioned事件 实现display：block/none的显示隐藏动画 准备工作 dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式 <style> .content { /* 四行css实现垂直居中 */ position: relative; top:.
CSS3动画（transition，transform）和元素的隐藏显示display
wangshang1320的博客
12-26 1万+
工作中经常会写一些简单的显示隐藏功能，可以适当加个动画 transition（过度动画，从某某某属性到某某某属性） 语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration ...
CSS 元素的显示与隐藏
p1967914901的博客
06-21 4287
使用 CSS 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别。下面是我总结的一些比较好的隐藏实践。 此时，图片 1.jpg 是不会有请求的。标签是不支持嵌套的，因此，如果希望在标签中再放置其他不渲染的模板内容，可以试试使用元素。例如： 图片 2.jpg 也是不会有请求的。另外，标签隐藏内容获取使用 ，使用。 如果希望元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有淡入淡出效果，则可以使用： 如果希望元素不可见，不
css中动画和display踩过的坑
qq_43427385的博客
09-18 1656
动画的过渡效果一遇到display就没有效果，是因为： display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 所以display做不了过渡效果，但是可以有其他的办法做过渡效果 解决办法: 1，依然用display，但是在js中加setTimeout延迟一下 2，用opac...
transition设置display过渡无效
友人C君的博客
04-16 8950
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 原因 display:none的时候，页面文档流中将不会存在该元素，display:block...
(30条消息) display中的transition实现
jiaoqi6132的博客
09-17 1078
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而display这个属性比较尴尬，两种状态，要么显示，要么隐藏，因此无法应用transition效果。 ..
CSS技巧篇(一)：transition与display冲突问题
weixin_46513664的博客
03-09 421
问题 使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 height=“419” width=“700” scrolling=“no” title=“display与transition冲突” src="//codepen.io/madman0621/embed/VGWKWm/?height=419&theme...
纯DOM+CSS3实现简单的小风车动画
01-19
用CSS3实现了一个小风车的效果，转转转，挺简单。 效果 代码 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html lang=en>  <head>  <meta charset=UTF-8>  <title>...
CSS书写规范、顺序和命名规则
01-19
1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他...
css入门笔记
05-15
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...
CSS里display和transition：opacity两属性在对元素的显现上会有冲突。
qq_33354470的博客
04-24 1731
css的transition渐变效果，在元素被hover的时候。 如果该元素在未被悬浮的时候，display设为none，opacity设为0，同时transition的也被设。 正当该元素在设置为悬浮时，display设为block，opacity设为1，此时transition会不起作用。 结论：display和transition：opacity两属性在对元素的显现上会有冲突。 解决方法：通...
CSS3动画下拉菜单（当transition遇到display的坑）
touchingt的博客
09-21 1万+
下拉菜单是页面中很常见的一个元素，但是和标签的默认外观实在不怎么好看，而且它们还很难通过CSS来修改成合意的样式，对hover效果的支持也不好，因此往往会使用或是、这些标签来模拟出下拉菜单的效果。 使用CSS3的transition，能够简单地实现下拉菜单的效果。 也在研究过程中发现，transition是不支持display属性的，可谓一个坑。
css transition过渡 与 display 冲突问题
TheobaldWong的博客
12-29 984
问题描述： 当改变元素display属性时，过渡transition将会失效，原因是display 为none时，页面doc流中不会存在该元素，而transition无法在doc流中做到无中生有，transition改变的只是前后两个状态。 解决办法： 1. 使用 width 或者 height 属性 2. 可用 visibility 属性 3. 使用opacity 属性 ...
display中的transition实现
热门推荐
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
transition与display冲突的说明及解决办法
weixin_43313076的博客
03-12 1625
transition属性的作用就是用来达到一个过度的效果 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 display 属性表示用来显...
详解CSS（一）
最新发布
Romised的博客
05-18 1034
CSS是什么、.基本语法规范、引入方式、内部样式表、行内样式表、外部样式表、选择器、基础选择器、标签选择器、类选择器、id选择器、通配符选择器、复合选择器、后代选择器、子选择器、并集选择器伪类选择器、字体属性、文本属性、文本颜色、文本对齐、文本装饰、文本缩进、行高
css transition display
08-15
CSS过渡（transition）属性与display属性之间存在一定的关系。首先，display属性的改变并不会触发过渡效果。这意味着，当你在hover时改变元素的display属性时，不会产生过渡效果。 例如，使用display:none将元素隐藏起来，然后使用display:block将其显示出来，这个过程不会有过渡效果。 然而，你可以通过使用visibility属性来实现过渡效果。当你将元素的visibility属性从hidden（隐藏）改变为visible（可见）时，可以添加过渡效果。 这意味着，在hover时改变元素的visibility属性可以产生淡出的过渡效果。注意，在使用visibility属性时，你仍然需要设置opacity属性和过渡属性，以控制元素的透明度变化和过渡速度。 综上所述，display属性的改变不会触发过渡效果，而visibility属性的改变可以实现过渡效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [CSS 元素的显示与隐藏](https://blog.csdn.net/p1967914901/article/details/125390389)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值