CSS3 中 transition-duration 对 display: none/block 属性无效？

最新推荐文章于 2023-05-04 14:46:49 发布
最新推荐文章于 2023-05-04 14:46:49 发布
阅读量641 收藏 1
点赞数

看W3文档中支持的属性：http://www.w3.org/TR/css3-transitions...

目前 display 属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)，文档说明在此：http://www.w3.org/TR/css3-transitions... 。而display是一个尴尬的属性，该计算什么值实现？

因此解决方案是利用支持的属性如：opacity: 0 或者 width:0, height:0 或者 visibility:hidden 来达到视觉上的隐藏效果。

如果目标元素中有链接之类那么推荐用visibility而不是opacity,因为opacity为0时链接仍可以被点击。

hzxOnlineOk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(30条消息) display中的transition实现
jiaoqi6132的博客
09-17 1093
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而display这个属性比较尴尬，两种状态，要么显示，要么隐藏，因此无法应用transition效果。 ..
web过渡（js/transition/display）
weixin_45627194的博客
11-18 808
文章目录JavaScript过渡CSS过渡transition过渡display隐显过渡 JavaScript过渡 具体代码如下： <title>js过渡</title> <link id="mystyle" rel="stylesheet" href="index1.css"> </head> <body> <div id="wrapper"> <br> <br&gt
transition与display冲突的说明及解决办法
weixin_43313076的博客
03-12 1688
transition属性的作用就是用来达到一个过度的效果 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 display 属性表示用来显...
浅谈css的过渡效果transition的使用
J_Sky：编程爱好者,又菜又爱玩.
05-04 368
要创建一个过渡，您需要使用 transition 属性。该属性允许您指定要过渡的 CSS 属性，以及过渡的持续时间、时间函数和延迟。这不是详尽无遗的列表，可能还有其他不能过渡的属性。如果您不确定某个属性是否可以过渡，可以尝试一下，看看是否有效。允许您对 CSS 属性的更改进行动画处理，这对于在网站上创建平滑和视觉上吸引人的效果非常有用。需要注意的是，并非所有属性都可以过渡。一个简单的小栗子，请使用鼠标划过这个盒子。
transition第一次没有效果和transition的duration无效
qq_44473483的博客
06-30 2042
transition第一次没有效果这个问题经常遇到，比如说轮播图，困扰了好久，有时候出现，有时候不出现，今天终于找到原因 原因很简单因为一开始没有设定要改变的样式的初始值 解决办法：例如你要改的是top:-50; 那一开始就要设top:0; 不然第一次不会有动画效果移动 duration无效的问题在react里做轮播遇到过，个人感觉跟回流重绘有些类似。 原因：在transiion里面，当连续两个duration的属性设置紧挨着时，会默认以最后一个duration属性为值。 解决办法：给第二个d
css3 transition属性鼠标悬停图标按钮动画提示框效果
11-24
在CSS3中，`transition`属性是一个非常重要的特性，它使得元素在不同状态间转换时可以平滑地过渡，而不是瞬间变化。这个属性主要用于创建动态效果，如按钮悬停时的动画，图标变换等，特别是在网页设计中，能极大地...
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
09-25
CSS3的`transform`属性允许我们对元素进行旋转、缩放、移动等操作。在这里，我们将按钮旋转360度，同时改变背景色和字体大小，以实现旋转并变色的效果： ```css .button:hover { -moz-transform: rotate(360deg); ...
css3下划线文字导航特效代码
03-20
在CSS3中，下划线文字导航特效是一种常见的网页设计技术，它能够为网站的导航菜单增添视觉吸引力和动态效果。这种特效通常是通过利用CSS3的`animation`属性来实现的，可以创建出诸如滑动、渐变或闪烁等动态效果。在...
CSS3点击图片切换到下一张特效代码
03-20
在CSS3中，我们可以通过`transition`属性来实现平滑的过渡效果，以及`:hover`和`:active`伪类来响应用户的鼠标悬停和点击事件。此外，`display`属性可以用来控制元素的可见性，从而实现图片的切换。下面我们将详细...
CSS3列表收缩展开详情预览特效
07-24
在本文中，我们将深入探讨如何实现“CSS3列表收缩展开详情预览特效”。这个特效是网页设计中的一个常见功能，通常用于产品展示或信息列表，它允许用户通过点击列表项来展开或收缩详细内容，从而提供更友好的用户体验...
css transtion不生效_css3 transition过度详解
weixin_29866423的博客
01-14 932
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。它的工作原理就是元素从一种样式逐渐改变为另一种的效果要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。div {width: 100px;height...
html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？
weixin_31211457的博客
06-07 522
代码如下面所示，我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换。但是，实际展示的时候，width 变换确实用了2秒，但display并没有，请问这是为什么呢？HTMLoCSS.transition-example {width: 40px;height: 40px;background: red;margin: ...
videojs播放器插件使用详解
菲宇运维
04-13 1万+
官方网站 下载最新版videojs 入门使用 查看DEMO | DEMO下载 引入video.js和video-js.css <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"> <script src="https:...
videojs中文文档详解
热门推荐
谢泽的网络日志
07-05 32万+
最近弄视频直播，网上没有全面的中文文档，只好自己整理了一份详细的api。Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。 官方网站 点此下载videojs.6.0.0 入门使用 引入video.js和video-js.css，使用video标签就像下面这样： &amp;lt;video id=&quot;e...
css transtion不生效_深入理解CSS过渡transition
weixin_42347535的博客
12-24 705
前面的话通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识定义过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function...
css transtion不生效_CSS中transition属性不起作用的原因及解决方法
weixin_34086545的博客
12-24 3318
CSS中的transition属性可用于调整元素更改的时间，它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果，但是有时候可能会出现无效的情况，所以我们就需要来理解transition属性的写法规则。我们先来看一下CSS中transition属性不起作用的原因transition是一种允许您指定更改时间等的属性。当用于设置鼠标光标放在按钮上时颜色和大小更改的时间时，它可以有...
css 过渡transition属性无效
qq_38966984的博客
08-09 2万+
     
transition失效问题
weixin_30644369的博客
03-21 978
关于transition，css教程中有一个很简单的例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">...
优化代码 并使该代码能够实现监测ntp客户端连接服务器的状态 且将其绘制成表格 <html> <head> <meta charset="utf-8"> <title>NTP</title> <script src="jquery-3.4.1.min.js"></script> <style type> .btn { background-color: #4CAF50; border: none; color: white; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 10px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .btn:hover { background-color: white; color: #4CAF50; border: 2px solid #4CAF50; } </style> </head> <body> <buttion class = "btn" onclick="startNTP()">启动NTP</buttion> <script> function startNTP(){ var xhr = new XMLHttpRequest(); xhr.open('GET','ntp.php',true); xhr.onload = function(){ alert(xhr.responseText); }; xhr.send(); } </script> </body> </html>
最新发布
05-24
transition-duration: 0.4s; cursor: pointer; } .btn:hover { background-color: white; color: #4CAF50; border: 2px solid #4CAF50; } </style> </head> ()">启动NTP</button> 服务器地址</th> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值