通過點擊一個類觸發(fā)事件，使另一個類發(fā)生display從none到block從而產(chǎn)生height的變化。

在各個類下面添加transition：height 2s；都沒有效果

要怎樣設(shè)置才能使該變化有過渡效果。

回復(fù)討論(解決方案)

設(shè)置高度

設(shè)置高度

我的頁面是用百分比設(shè)置的，能不能在不設(shè)置px的情況下使用呢

百分比也可以。比如height: 0%;到height: 100%;

百分比也可以。比如height: 0%;到height: 100%;

我的height是auto；在下面設(shè)置transition沒效果；

是那種點擊出下拉欄的那種效果，有三層，所以高度變化有三層，點擊事件使通過JS添加的。

所以我只有個變化的DIV，和none類{display：none}控制出現(xiàn)和消失

不知道要怎么做才能加過渡效果QAQ

聽你的描述，貌似是出在display:none到block的問題吧，你過渡都沒聲明這個屬性，怎么會有從無到有的效果（PS：過渡不支持這個屬性）。所以你只要把display:none去掉就行了，讓元素的高度變化就行

簡單一點說就是我元素本身是display：block，然后通過js 增刪none類{display：none}來達(dá)到下拉欄的效果；

但是過渡效果不知道如何才能添加進(jìn)去，直接加transition：height 2s；沒有效果

簡單一點說就是我元素本身是display：block，然后通過js 增刪none類{display：none}來達(dá)到下拉欄的效果；

但是過渡效果不知道如何才能添加進(jìn)去，直接加transition：height 2s；沒有效果

別用js去增刪none類，改變高度就行。因為你加了這個所有沒有效果。

一↓



一.1
一.2
一.3
一.4↓

一.4.1


一.4.2.1
一.4.2.2



差不多就這樣，通過點擊有↓的div然后達(dá)到增刪none類的效果

css方面
.menu-item {
display: block;
height:auto;
width:100%;
background:#B4B4B4;
overflow:hidden;
position:relative;

transition:height 2s; /*沒有效果*/
}

簡單一點說就是我元素本身是display：block，然后通過js 增刪none類{display：none}來達(dá)到下拉欄的效果；

但是過渡效果不知道如何才能添加進(jìn)去，直接加transition：height 2s；沒有效果

別用js去增刪none類，改變高度就行。因為你加了這個所有沒有效果。

那不就得全部重做了

已經(jīng)不打算糾結(jié)display了，但是為什么.none {height:0%!important;}不起作用，！important不是最高級了嗎，還是被其他css高度覆蓋了

transition過渡功能有局限性，其過渡屬性的起始值和終止值都必需是數(shù)值型的值。而且必需明確的設(shè)定為固定的數(shù)值。不能用auto，none，block等屬性做過渡

transition過渡功能有局限性，其過渡屬性的起始值和終止值都必需是數(shù)值型的值。而且必需明確的設(shè)定為固定的數(shù)值。不能用auto，none，block等屬性做過渡

那已經(jīng)沒辦法了嗎 ~ 能不能不用css也能做出平滑下拉的效果~

transition過渡功能有局限性，其過渡屬性的起始值和終止值都必需是數(shù)值型的值。而且必需明確的設(shè)定為固定的數(shù)值。不能用auto，none，block等屬性做過渡

那已經(jīng)沒辦法了嗎 ~ 能不能不用css也能做出平滑下拉的效果~

看看這個
http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

transition過渡功能有局限性，其過渡屬性的起始值和終止值都必需是數(shù)值型的值。而且必需明確的設(shè)定為固定的數(shù)值。不能用auto，none，block等屬性做過渡

那已經(jīng)沒辦法了嗎 ~ 能不能不用css也能做出平滑下拉的效果~

看看這個
http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

謝謝，我把一些重要的高度改成max-height和transition：max-height 2x；后可以了！