transition过渡动画与display等关系

最新推荐文章于 2025-03-21 09:08:56 发布

原创最新推荐文章于 2025-03-21 09:08:56 发布 · 621 阅读

2 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS中不同属性变化的过渡效果，包括display、visibility、opacity和width等，解析了transition在各种情况下的应用有效性及注意事项。

对于display: none——>display：block的动画，transition无效。可能因为display属于不占位元素消失。

对于visibility: hidden——>visibility: visible的动画，transition有效。因为visibility: hidden元素消失，占位。但由于实际占位，hover放在visibility: hidden的元素上也会触发效果，不建议使用。

对于opacity: 0——>opacity: 1的动画，transition有效。类似淡入淡出效果

对于width: 0——>width:100px;transition有效。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

what-to-say

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

一行代码实现display"过渡动画"原理

petertanjinjie的博客

09-07

2191

写本文的起因上篇文章，提到如何让display出现过渡动画，却没有仔细介绍原理。为了更好的让想学习的人深入理解于是加班加点写下了这篇“短文”，我想以后还是以短文为主，不然大家看起来太累正...

CSS3-transition过渡动画详解

卡拉米

10-30

676

transition过渡动画、animation自定义动画。本文主要讲解transition过渡动画的使用，若要了解animation动画请前往。在不使用transition时，若通过用户的交互直接改变css样式属性，呈现的形式是立刻转变，但有时我们希望这个变化是有过渡效果的，这时就可应用transition过渡动画了。我们先来简单了解下transition下面详细介绍各个属性👇。

参与评论您还未登录，请先登录后发表或查看评论

解决transition动画与display冲突的几种方法

weixin_33962621的博客

07-22

597

如demo（如果没有显示，请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/）所示，基本的效果是在点击“Translate”按钮后，蓝色区域透明度变为0，然后隐藏display:none；点击Reset按钮后，首先显示蓝色区域display:block，然后透明度逐渐恢复至1，代码如下： 1 var btn1 = $("#testbtn1"); ...

display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题

韩旭的博客

05-10

9189

文章目录一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别？3.2 如何不让其占据页面位置？一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。二、直接采用display:none;display:block;过渡

transition与display冲突的说明及解决办法

weixin_43313076的博客

03-12

1843

transition属性的作用就是用来达到一个过度的效果 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 display 属性表示用来显...

解决display:none到display:block无法实现过渡效果的问题(转换解决思路)

weixin_41033048的博客

12-23

8369

主要是解决问题的思路要转换一下一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。所以我们可以通过先让内容显示出来，然后再给他们加入animation的动画来实现。具体办法就是让父容器作为display:none和display:block的显示过程。而里面的内容就相当于一开始就是存在的了，我们再让它从透明度为0到1的显示就可以了。 <div class="hover-on"> <div class=".

display与transition动画冲突问题

lemossrkilakila

05-04

962

display与transition动画冲突延时 timeout requestAnimationFrame 替代 absolute visibility opacity keyframe

CSS动画：transition属性详解--平滑过渡的奥秘

最新发布

caishuangxi111的博客

03-21

1433

btn {/* 使用自定义三次贝塞尔曲线 */曲线设计原则弹性效果：Y轴超出0-1范围（如-0.5或1.5）阶段强调：陡峭部分表示快速变化，平缓部分表示缓冲在线工具推荐。

Vue 解决路由过渡动画抖动问题(实例详解)

10-15

在开发使用Vue.js框架的单页面应用（SPA）时，路由过渡动画是提升用户体验的重要方面之一。然而，在实现过渡动画时，可能会遇到页面抖动的问题，这会破坏用户体验。本文详细介绍了如何解决Vue在路由过渡过程中出现的...

补充：并非所有CSS属性都能应用transition过渡效果

艾恩小灰灰的博客

04-22

790

尽管CSS3transition属性极大地拓宽了可实现平滑过渡的CSS属性范围，但并非所有CSS属性都能应用过渡效果。

display:none无transition动画过渡；height:auto的transition动画;

u010267996的博客

03-14

1万+

想实现类似bootstrap中collapse的功能。设置过渡动画的时候发现下面两个问题。一、使用display:none和display:block是不会有transition动画效果的。目前display属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)。而display是一个尴尬的属性，该计算什么值实现？

CSS技巧篇(一)：transition与display冲突问题

madman0621的博客

09-05

7040

问题使用transition对div的隐藏与显示进行过渡，但是transition完全失效，没有过渡效果。 See the Pen VGWKWm by madman0621 (@madman0621) on CodePen. div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transiti...

css实现 display: none和display: block的切换动画

热门推荐

李二狗的博客

10-19

4万+

话不多说先上代码.index-detail-list .item-contain{ display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ececec; } .index-detail-list .item-contain.active{ display: bl

盒子模型和display：none,display:block一起使用存在的问题

weixin_46971190的博客

10-28

688

使用盒子模型display：flex后，子元素用display：none，display：block会出现失效。解决办法：在子元素中外面加个div标签

解决display无法使用transfrom过渡效果

Mrcxt的博客

08-16

8634

如 demo （如果没有显示，请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/）所示，基本的效果是在点击“Translate”按钮后，蓝色区域透明度变为0，然后隐藏display:none；点击Reset按钮后，首先显示蓝色区域display:block，然后透明度逐渐恢复至1，代码如下： 1 var btn1 = $("#testbtn1");

display与transition冲突

koudandan的博客

12-03

240

参考地址：解决transition动画与display冲突的几种方法 - JunpengZ - 博客园实验成功案例： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>display与transition冲突</title> <meta name="Keywords" content=""&gt..

transition与display冲突问题

qwguanbin的博客

05-17

234

记录一下，一次vue项目中，写添加购物车小球下落动画的时候，刚好碰到过因为操作display来显示隐藏小球而导致transition动画没效果，后面改用v-if或v-show来实现显示隐藏，动画完美实现。

display中的transition实现

尘埃丶落定的博客

07-25

1万+

display中的transition实现这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...

css中display:none变为block无法触发transition的解决办法

weixin_43623808的博客

09-16

2725

问题在页面开发过程中使用transition过渡是一个非常方便并能提高用户体验的属性，不会让一些元素的变化显得非常的突兀，但是元素从display:none到display:block是无法触发过渡（transition）属性的，如果说使用js来解决这个问题会添加复杂的鼠标移入移出监听事件解决办法最简便的方式还是使用css3解决，这样也使得js的逻辑代码更纯粹以下代码的逻辑是：鼠标悬浮父元素触发hover之后给子元素div添加一个动画需要注意的是这个方法只能解决父子关系的元素 <head&g