关于css在不同类上触发transition过渡问题_html/css_WEB-ITnose
程序员文章站
2022-05-04 22:23:16
...
通过点击一个类触发事件,使另一个类发生display从none到block从而产生height的变化。
在各个类下面添加transition:height 2s;都没有效果
要怎样设置才能使该变化有过渡效果。
我的height是auto;在下面设置transition没效果;
是那种点击出下拉栏的那种效果,有三层,所以高度变化有三层,点击事件使通过JS添加的。
所以我只有个变化的DIV,和none类{display:none}控制出现和消失
不知道要怎么做才能加过渡效果QAQ
别用js去增删none类,改变高度就行。因为你加了这个所有没有效果。
在各个类下面添加transition:height 2s;都没有效果
要怎样设置才能使该变化有过渡效果。
回复讨论(解决方案)
设置高度
设置高度
我的页面是用百分比设置的,能不能在不设置px的情况下使用呢 百分比也可以。比如height: 0%;到height: 100%;
百分比也可以。比如height: 0%;到height: 100%;
我的height是auto;在下面设置transition没效果;
是那种点击出下拉栏的那种效果,有三层,所以高度变化有三层,点击事件使通过JS添加的。
所以我只有个变化的DIV,和none类{display:none}控制出现和消失
不知道要怎么做才能加过渡效果QAQ
听你的描述,貌似是出在display:none到block的问题吧,你过渡都没声明这个属性,怎么会有从无到有的效果(PS:过渡不支持这个属性)。所以你只要把display:none去掉就行了,让元素的高度变化就行
简单一点说就是我元素本身是display:block,然后通过js 增删none类{display:none}来达到下拉栏的效果;
但是过渡效果不知道如何才能添加进去,直接加transition:height 2s;没有效果
简单一点说就是我元素本身是display:block,然后通过js 增删none类{display:none}来达到下拉栏的效果;
但是过渡效果不知道如何才能添加进去,直接加transition:height 2s;没有效果
别用js去增删none类,改变高度就行。因为你加了这个所有没有效果。
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论