为什么当显示父元素时，transition-delay对子元素不起作用？

当显示父元素时，transition-delay对子元素不起作用的原因是因为transition-delay属性只能应用于直接被过渡属性影响的元素。当父元素显示时，子元素的过渡属性并没有改变，因此transition-delay对子元素不会产生影响。

transition-delay属性用于指定过渡效果开始的延迟时间，它需要与过渡属性一起使用。过渡属性定义了元素在状态改变时的过渡效果，例如改变元素的宽度、高度、颜色等。当过渡属性的值发生改变时，过渡效果才会触发。

如果想要实现子元素在父元素显示后延迟过渡效果的效果，可以通过其他方式实现，例如使用JavaScript来控制子元素的过渡效果，或者使用动画库来实现更复杂的动画效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足各种计算需求。产品介绍链接
腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。产品介绍链接
腾讯云人工智能平台（AI Lab）：提供丰富的人工智能服务和工具，帮助开发者构建智能应用。产品介绍链接
腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接
腾讯云移动推送（TPNS）：提供高效可靠的移动消息推送服务，帮助开发者实现消息推送功能。产品介绍链接

相关·内容

【前端攻略--HTMLCSS】这是你需要的transform学习教程

div设置高度的时候，子级元素div的高度就会撑开父级元素div；而当我们给父级元素div加上一个高度值，那么无论子级元素div的高度是多少，最终显示的高度都是父级元素设定的值。...2、清除浮动当子级元素div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了父级元素div，也就是说变成了一个立体的模型（实际是脱离了文档流，不占用文档流的空间）。...此时的子级元素的宽高是多少，对于父级元素来说都不起作用。...这时候我们给父级元素这个div加上overflow:hidden这个属性的时候，其中的子级元素的浮动属性就会被清除，重新在文档流中开辟一块地方，给子级元素显示。...当父级元素没有设置浮动，而子元素设置了浮动时，子元素脱离文档流，父级元素高度没法扩展，被缩成一条。在父层用overflow:hidden恢复父层高度，与内容高度自适应。 ---- ?

9451 0

CSS flex样式垂直居中

文章目录文章参考问题描述 flex 个人理解对子元素影响作用自身的样式作用于子控件案例(水平垂直居中) 方法一（改变方向）方法二（让flex的子元素水平垂直居中）文章参考 Flex 布局教程...如果设置了高度，默认是从左到右，从上到下的顺序来排布；如果要做垂直居中，就需要计算div控件的高度，如果内容变多或者变少，又会导致定位不准确，因此，最稳妥的办法就是让浏览器自己去根据div的高度居中显示...flex 个人理解对子元素影响设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。...如果项目只有一根轴线，该属性不起作用。作用于子控件 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。案例(水平垂直居中) 方法一（改变方向） <!

1K1 0

理解CSS | 青训营笔记

具体来说，当一个HTML元素形成了BFC时，它会创建一个独立的渲染区域，在这个区域内的元素布局不会影响到外部元素。...等属性，对子元素进行跨行或跨列操作、或者调整子元素的尺寸。...：当两个层叠上下文相互重叠时，如果父元素的背景色与子元素不同，则背景色优先于 z-index 判断。...的元素当一个元素形成了层叠上下文时，它就具有了一定的独立性和优先级，其子孙元素会在该元素内部形成自己的层叠关系，并且不会影响到其他元素。...当浏览器宽度小于 768px 时，第一个媒体查询将应用规则集中的样式，而当浏览器宽度大于或等于 768px 时，第二个媒体查询将应用规则集中的样式。

991 0

10分钟理解CSS3 FlexBox

；工作原理设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等；兼容性 ?...可以看到三个子元素平分了父元素的空间，因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢？...此时two和three的大小不变，而one占据了父元素剩余空间。...Flex Shrink 与flex-grow相对的是flex-shrink， flex-shrink用于控制子元素尺寸超过flex container后，对子元素的压缩。...有关，当flex-direction为row的时，flex-basis设置的是宽度，当flex-direction为column时，flex-basis设置的是高度；当flex item被绝对定位后（

7675 0

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。...对子元素的影响如果子元素什么都不设置的话，都会受父元素的影响，和父元素的显示效果一样，我们就来举例看看，如果子元素设置的值和父元素设置的值不同会有什么效果。例子（opacity属性） <!...可以看出，使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility...属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来。...当元素是 visibility:hidden; 时，自身的事件不会触发，所以像上面这个例子中，直接在蓝色块div元素上加 hover 事件，要去将自身的 visibility:hidden 过渡到

1.7K1 0

【CSS】布局属性：Flex

.box{ flex-wrap: nowrap | wrap | wrap-reverse; } flex-wrap属性作用 nowrap 不换行，超出部分不显示 wrap 换行，从上往下排列 wrap-reverse...如果项目只有一根轴线，该属性不起作用。轴线可以理解为在justify-content和align-items基础上的子元素排列。...子元素属性上面都是针对父布局容器对子元素的排列方式，子元素可以设置哪些属性呢？ align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。...如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 flex-basis可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。...三、Flex兼容性 flex不是所有浏览器都兼容，也不是所有手机都兼容，当遇到兼容问题时，需要用传统的css布局语法进行适配。

8094 0

H5C3第二节

perspective透视电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。...注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 perspective：500px; 关于近大远小 ? ?...为什么现实生活中能够看出来？...注意这个属性只能给父元素添加。...*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。

5342 0

2022高频前端面试题——CSS篇

但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性 em是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为...如果项目只有一根轴线，该属性不起作用。项目（子元素）也有一些属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。...（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。...sticky 属性值有以下几个特点：该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 animation-play-state：指定动画是否正在运行或已暂停 12.

1.4K3 0

CSS transition delay简介与进阶应用

在此，我们为什么不用display属性呢，因为在display改变时，transition并不会生效。那我们为什么需要在使用了opacity属性的时候同时使用visibility属性呢。...当鼠标移入时：鼠标移入div1元素触发了hover事件，div2的visibility属性变为visible transition属性让opacity属性从0变为1 而当鼠标移出时：鼠标移出div1...元素 hover事件停止触发，div2的visibility属性变为hidden transition属性让opacity属性从1变为0 根据上面的情况我们知道，当hover事件结束后，visibility...但是当鼠标移入时，动画效果消失了，现在再让我们来分析下为什么会出现这个情况。...当时鼠标移入时：鼠标移入div1元素触发hover事件 transition属性让opacity属性从0变为1 visibility属性变为visible 当鼠标移出时：鼠标移出div1元素 hover

2.1K2 1

Android六大布局

--是本元素所有子元素的与父元素边缘的距离，设置在父元素上--> android:layout_marginLeft="10dp" android:orientation android:layout_weight ="1" 当android:orientation="vertical" 时，只有水平方向的设置才起作用，垂直方向的设置不起作用。...当android:orientation="horizontal" 时，只有垂直方向的设置才起作用，水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。...当添加TableRow时，该布局增加了一行，并且在TableRow里每添加一个组件，便增加一列 TableLayout无法做出跨行跨列的效果，每行每列都是挨着的，就算是单元格设置Collapsed属性

2.6K2 0

前端(二)-CSS

E:last-child 父元素的最后一个子元素 E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1，2，3 even,odd) E:first-of-tyope 父元素指定类型的第一个子元素...属性说明 display:block 将元素显示为块元素，前后有换行符 display:inline 将元素显示为内联(行内)元素，前后没有换行符 display:inlineblock 将元素显示为行内块元素...、返回顶部图标、吸顶导航栏等； 6.4 z-index属性调整元素定位时重叠层的上下位置； 1.z-index属性值：整数，默认值为0 ； 2.设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系...）指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果；正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发；负值：元素过渡效果会从该时间点开始显示，之前的动作被截断...； 0：默认值，元素过渡效果立即执行； 7.3 过度的触发机制 1.伪类触发：hover 鼠标悬停和划过时的显示效果：active 控制按钮被点击时的显示效果：focus 获得聚焦对象的元素

1.9K2 0

浪费了8个小时的摸鱼时间解决z-index不生效问题

当z-index不起作用时，可能是由于以下几个原因：没有指定元素的定位属性：z-index属性只对定位元素（position属性值为relative、absolute或fixed）起作用。...如果仍然无法解决z-index不起作用的问题，可能需要检查其他CSS属性或JavaScript代码是否对元素的显示顺序产生了影响。于是按照上文给的方案各种修改 position属性，发现并未生效。...当一个元素创建一个层叠上下文时，它的所有子元素都会受到父元素的层叠顺序影响。...3.2、层叠水平与层叠顺序“层叠水平”，英文称作“stacking level”，在同一层叠上下文中的不同元素重叠时，它们的显示顺序会遵循层叠水平的规则，而z-index能够影响元素的层叠水平。...网页中展示最重要的是内容，因此内容的层叠顺序比较高，当发生层叠时，重要的文字和图片等内容优先暴露在屏幕上（如下图）。

1610 0

每天10个前端小知识【Day 16】

: none; } 这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了。...:last-of-type 父元素的最后一个元素 :only-of-type 父元素的特定类型的唯一子元素 :only-child 父元素中唯一子元素 :nth-child(n) 选择父元素中第N个子元素...:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前 :last-child 父元素的最后一个元素 :root 设置HTML文档 :empty 指定空的元素 :enabled...GPU是显卡的“大脑”，它决定了该显卡的档次和大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。...同时，在使用硬件加速时，尽可能的使用z-index，防止浏览器默认给后续的元素创建复合层渲染。

1571 0

android 线性布局（LinearLayout）

，这几个参数是 android:layout_gravity ( 是本元素相对于父元素的对齐方式 ) android:gravity=“bottom|right”（是本元素所有子元素的对齐方式，设置在父元素上...,多个值用｜隔开） android:layout_gravity (子元素在父元素的对齐方式，设置在子元素上) 当 android:orientation=“vertical” 时，只有水平方向的设置才起作用...，垂直方向的设置不起作用。...当 android:orientation=“horizontal” 时，只有垂直方向的设置才起作用，水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。...android:padding=“10dp” （是本元素所有子元素的与父元素边缘的距离，设置在父元素上） android:layout_marginLeft=“10dp”(子元素与父元素边缘的距离，设置在子元素上

8921 0

巧用 transition 实现短视频 APP 点赞动画

很多同学可能还不明白，明明是点赞一次产生一个表情，为什么需要一次生成这么多不断运动的表情效果呢？这是因为，由于 CSS 没法直接正面做到点击一次，生成一个表情，所以我们需要换一种思路实现。...keyframes move { 100% { transform: rotate(0) translate(0, -250px); } } 这里，需要注意的是：点赞的按钮，通过了父元素....g-wrap 的伪元素实现，这样的好处是，子元素 li 的 :active 点击事件，是可以冒泡传给父元素的，这样每次子元素被点击，我们都可以放大一次点赞按钮，用于实现点击反馈。...就是如果当点击的速率过快，是无法实现一个点击，产生一个表情的这是由于 CSS 方案的本质是通过点击一个透明表情，让它变成不透明。...所以，这里只能是伪随机，基于 DOM 的个数，当 DOM 数越多，整体而言，随机的效果越好。基本上 50 个 DOM 是比较足够的。

7331 0

React Native面试知识点

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。...2.修改方式：state只能在自身组件中setState，不能由父组件修改；props只能由父组件修改，不能在自身组件修改。...3.对子组件：props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件；state代表的是一个组件内部自身的状态，只能在自身组件中存在。...shouldComponentUpdate 返回 false， React 将假定当前组件及其所有子组件将保持与当前组件相同 6.reactJS的props.children.map函数来遍历会收到异常提示，为什么...如果项目只有一根轴线，该属性不起作用。

2.9K1 1

CSS Transitions

这个属性有两个可能的值： visible（默认值）：表示元素的背面是可见的。这意味着元素在旋转或翻转时，不仅正面可见，而且背面也会显示在屏幕上。 hidden：表示元素的背面是不可见的。...❝这个组合在某物进入和退出视口时非常有用，比如一个弹窗的显示和隐藏。 ❞ ease-in几乎只用于元素以屏幕外或不可见结束的动画；否则，突然的停止可能会令人不适。...当一个元素的高度缩小时，会引发一连串的反应；所有兄弟元素都需要向上移动以填充空间！其他属性，如background-color，在进行动画时成本较高。...我相信在项目开发中，或多或少遇到过如下的情况：作为开发者，我们可能可以理解为什么会发生这种情况：下拉菜单只在鼠标悬停在上面时保持打开！...规范明确规定，当传递多个数字时，第一个是持续时间，第二个是延迟。 ---- 元素快闪当在悬停时将一个元素向上或向下移动时，我们需要非常小心，以确保不会出现「快闪」现象。

3163 0

CSS水平居中

当元素是inline-block的时候其实是同时具备内联元素和块元素的的特征。所以text-align就会生效。注意：display:inline内联元素设置宽高是无效的。...class="parent"> 哈哈优缺点分析优点：兼容性较好缺点：text-align 属性针对子元素的行内元素也生效...，如果对子元素的行内元素有其他位置的变更，需要重新对子元素设置text-align元素重新赋值。...：当父级元素没有开启定位的话，则子级元素是相对于页面的绝对定位。...当父级元素开启了定位的话，则是相对于父级元素的。

2.4K2 0

CSS笔记

3.5、相对定位里面的绝对定位（子绝对父相对）　　1）、默认情况下所有的绝对定位的元素, 无论有没有父元素, 都会以body作为参考点，所以元素的位置会随着浏览器的宽度高度的变化而变化；　　2）、而相对定位不会脱离标准流..., 会继续在标准流中占用一份空间, 所以不利于布局界面　　3）、但是如果一个绝对定位的元素的父级元素也是定位流（绝对/相对/固定，不能是静态定位), 那么这个元素的绝对定位就会以父级元素为参考点；　　...4）、如果嵌套的父级元素都是定位流，那么绝对定位的元素以离它最近的父级元素为参考点　　5)、对于嵌套的元素都是定位流，则定位流中的子元素会忽略父级元素的padding属性，即定位流父级元素的pading...194px; background-color: yellowgreen; /* 透视：近大远小注意点：透视属性必须加在要显示透视效果的元素的父元素上...backwards: 让元素等待状态的时候显示动画第一帧的样式 both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

1.6K4 0

CSS3总结

：normal | reverse | inherit 子元素的排列顺序 -webkit-box-flex:分配剩余空间 box-ordinal-group：子元素显示顺序属性： box-align：...子元素的垂直对齐方式 start | end | center | baseline | stretch box-pack：子元素的水平对齐方式 start | end | center | justify...start 所有盒子在父盒子的左侧，余下的空间在右侧； end所有盒子在父盒子的右侧，余下的空间在左侧； justify 余下的空间在盒子间平均分配； center 可利用的空间在父盒子的两侧平均分配。...start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部； end 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部； center 可用空间平均分配，上面一半，下面一半； baseline 所有盒子沿着它们的基线排列... ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] 默认值：看每个独立属性

5192 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云