display: none 和display: block之间的切换出现过渡效果失效

最新推荐文章于 2024-08-14 19:29:59 发布
最新推荐文章于 2024-08-14 19:29:59 发布
阅读量2k 收藏 4
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/array__/article/details/123985752
版权
博客探讨了为何在CSS中使用`display:none`切换到`display:block`不会产生渐变动画，原因是这会导致DOM节点的重新创建。解决方案是改用`opacity`属性进行透明度变化，以确保动画效果的平滑。此内容对于前端开发者优化用户体验至关重要。
摘要由CSDN通过智能技术生成

原因：display: none是销毁当前dom节点，再次切换为display: block时会再创建节点，此时css选择器会重新赋予上去。所以不存在渐变动画。
解决方法：用opacity（透明度）去替代。

jsPao
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery图片切换显示隐藏左右按钮控制图片-20130626
04-20
例如，`display:none`表示隐藏，`display:block`或`inline-block`表示显示。 5. jQuery事件处理：在用户点击左右按钮时，需要绑定点击事件，触发图片的切换。jQuery提供了`.click()`函数来添加点击事件监听器。 6....
JS遮罩层效果
11-29
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在实现用户交互和动态效果方面具有显著优势。在网页设计中，遮罩层（Mask Layer）是一种常见且实用的技术，它可以在页面上覆盖一层半透明或全黑的...
css中隐藏后显示过渡设置-transition属性与display属性冲突问题-解决案例
JackieDYH的博客
04-20 4367
由来 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 解决 使用 visibility 或者 opacity 替代 display visibility:hidden的时候元素任然存在于.
display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题
韩旭的博客
05-10 7713
文章目录一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别？3.2 如何不让其占据页面位置？ 一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。 当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。 二、直接采用display:none;display:block;过渡
解决display:none到display:block无法实现过渡效果的问题(转换解决思路)
weixin_41033048的博客
12-23 7952
主要是解决问题的思路要转换一下 一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。 所以我们可以通过先让内容显示出来，然后再给他们加入animation的动画来实现。具体办法就是让父容器作为display:none和display:block的显示过程。而里面的内容就相当于一开始就是存在的了，我们再让它从透明度为0到1的显示就可以了。 <div class="hover-on"> <div class=".
关于HTML中div从display:none到display:block透明度渐增显示的实现
热门推荐
战五渣
09-07 1万+
在编写前端页面的过程中，经常会遇到将鼠标移至链接或li上时显示div的需求。如图： 而在这过程中，为了有更好的用户体验，通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现： （1）在HTML中编写页面代码，并在CSS中设置要弹出的div显示display:none； HTML：
display:none到display:block失效问题及解决办法
海风依旧
10-19 3228
项目开发中display:none到display:block失效问题及解决办法
display none的元素重新展示如何撑开页面_一行代码实现display"过渡动画"原理
weixin_39553904的博客
11-29 374
作者：Peter 谭老师转发链接：https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章，提到如何让display出现过渡动画，却没有仔细介绍原理。为了更好的让想学习的人深入理解于是加班加点写下了这篇“短文”，我想以后还是以短文为主，不然大家看起来太累正式开始初始化界面html>Document...
表格中tr的display:block在火狐中显示错乱的解决方法
GhostSniper
11-07 261
表格中tr的display:block在火狐中显示错乱的解决方法 按照常理，对于某一单元行需要显示时，使用display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。 1、当表格为多列...
二维码的显示和隐藏(含完整代码)
10-06
qrcodeImg.style.display = 'block'; } // 隐藏二维码 function hideQRCode() { const qrcodeImg = document.getElementById('qrcode'); qrcodeImg.style.display = 'none'; } // 示例：点击按钮切换二维码显示...
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
10-25
cstCM.style.display = 'block'; document.onmousedown = clearCustomCM; } function clearCustomCM(){ document.getElementById('cstCM').style.display = 'none'; document.onmousedown = null; } ``` 在这...
详解css清除浮动float的七种常用方法总结和兼容性处理
11-21
7. **使用`:after`伪类**：这是目前推荐的主流方法，通过在父元素末尾添加一个看不见的块级元素，利用`content`、“`clear:both`”和`display:block`来清除浮动。为了兼容IE6和IE7，需要结合`zoom:1`。这种方法保持...
display从none变成block使用动画过渡
weixin_43294560的博客
01-03 4252
transition过渡不生效 animation动画生效 代码示例: 去掉.jf-drawer-container-hide类后,帧动画生效 .jf-drawer-container { display: block; position: fixed; z-index: 2000; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; background-color: #ccc; } .
css中display:none变为block无法触发transition的解决办法
weixin_43623808的博客
09-16 2528
问题 在页面开发过程中使用transition过渡是一个非常方便并能提高用户体验的属性，不会让一些元素的变化显得非常的突兀，但是元素从display:none到display:block是无法触发过渡（transition）属性的，如果说使用js来解决这个问题会添加复杂的鼠标移入移出监听事件 解决办法 最简便的方式还是使用css3解决，这样也使得js的逻辑代码更纯粹 以下代码的逻辑是：鼠标悬浮父元素触发hover之后给子元素div添加一个动画 需要注意的是这个方法只能解决父子关系的元素 <head&g
CSS3动画与display:none冲突的解决办法
qq_41912128的博客
10-20 1828
最近在做项目，前端用VUE做数据大屏，想用CSS3动画实现淡入淡出效果， 但是发现盒子会伸缩，最后翻阅大神操作，得以解决，记录一下，原文链接：https://www.cnblogs.com/yangzhou33/p/9119596.html 概述 css不能在display:none和display:block之间进行动画，并且也不能在height:0和height:auto之间进行动画。这里我研究了一下在display:none和display:block之间进行动画的解决方案，记录下来供以后开发时参考，
20-CSS过渡
CapejasmineY的博客
08-07 505
过渡属性，position语transform区别
display实现淡入淡出过渡效果
槐序二十四的博客
08-25 3887
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: relative; } input { /*按钮样式*/ cursor: pointer; border: none; outline: none; ba...
CSS小技巧---display显隐动画效果
勤学daydayup的博客
07-16 8758
今天记录一个css小技巧 既不用setTimeout 也不用监听transitioned事件 实现display：block/none的显示隐藏动画 准备工作 dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式 <style> .content { /* 四行css实现垂直居中 */ position: relative; top:.
WHAT - CSS 中的 width
最新发布
weixin_58540586的博客
08-14 849
width 可以说是在前端开发布局中最重要的一个布局属性。在 CSS 中，width属性用于设置元素的宽度。它可以接受多种取值，分别适用于不同的布局需求和场景。下面是常见的width固定宽度: 使用pxemrem设置固定宽度。相对单位: 使用vwvh根据包含块或视口尺寸设置宽度。自适应宽度: 使用auto根据内容或布局调整宽度。计算和范围: 使用calc()clamp()实现更复杂的宽度计算。不同的width属性取值适用于不同的场景和需求，选择合适的值可以帮助你实现所需的布局效果。auto。
存在display: flex的情况下如何使用display: none和display: block
06-13
如果一个元素设置了 `display: flex`，那么这个元素的子元素也会受到 flex 布局的影响。因此，如果想要隐藏一个子元素，可以使用 `display: none`。这会将元素从页面中完全移除，包括在 flex 容器中的位置。如果想要显示这个子元素，可以使用 `display: block` 或者 `display: inline-block`，这样子元素就会重新出现在 flex 容器中，并且按照 flex 布局排列。需要注意的是，如果子元素设置了 `display: none`，那么它的 flex 属性也将失效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值