過渡css屬性使內容看到兩次

當我點擊第2節內容回來它關閉，但是當它關閉我看到文本兩次。
當第2節機構即將關閉我看到第2節內容在黑色但綠色背景消失
我調試了代碼，我認爲它的發生是由於過渡css屬性，我無法刪除它，因爲我需要看到順利的關閉。

transition：height .5s; transition：height .5s，padding-top .5s，padding-bottom .5s;

你能告訴我如何解決它。
在小提琴中提供我的代碼。

.accordion-section { 
    border-bottom: solid 1px #000; 
} 

.accordion-section > h3 { 
    padding: 6px; 
    font-size: 16px; 
    background-color: #CCC; 
    margin: 0; 
} 


.accordion-section > .body { 
    height: 0; 
    padding: 0 10px; 
    overflow-y: hidden; 
    transition: height .5s; 
    transition: height .5s, padding-top .5s, padding-bottom .5s; 
}

來源

2017-04-30 texi rv

下面的答案有幫助嗎？ –

@AlanDunning感謝您的回覆......我現在添加了圖片...綠色背景消失後仍然看到第1部分內容文字...我想讓它消失在同一時間綠色背景消失 –

如果您需要hide上所有section這使該設置的文本出現accordion close後，textcolor爲transparent這merges與background-color開始如下。

.accordion-section > .body { 
    height: 0; 
    padding: 0 10px; 
    overflow-y: hidden; 
    color:transparent;/*Add this*/ 
    transition: height .5s, padding-top .5s, padding-bottom .5s; 
}

來源

2017-04-30 15:08:18 frnt

它的工作...謝謝...我還有一個問題，如果我點擊第1節第1節內容打開，如果我點擊節第2節第1節內容關閉，接下來的場景，如果我再次單擊第1節第1節內容打開，現在如果我點擊第4節第1節內容不關閉......你能告訴我如何解決它... –

我會檢查，但首先看到這個jsFiddle，如果你不想讓文字顏色透明，那麼有2個地方，你必須添加過渡http://jsfiddle.net/b4L6kyg4/88/ – frnt

@texirv第4節不能關閉第1節，因爲它們是2種不同的手風琴。 – frnt

根據您所提供它小提琴看起來你正在做關於你提到的部分內容的隱藏和顯示基於CSS動畫。然而，你似乎並沒有定義你想要動畫的東西，或者至少不是所有你想要的動畫。

您可以取代：

transition: height .5s, padding-top .5s, padding-bottom .5s;

與

transition: line-height .5s, margin-bottom .5s, color .5s, font-size .5s, background .5s, height .5s, padding .5s;

然而，正如你似乎是動畫當前所有的風格段的，你可以簡單地使用它的內容：

transition: all .5s;

這是應用到你的提琴這種變化：

Updated fiddle link

來源

2017-04-30 14:36:47

感謝您的支持回覆...我已經添加圖片了...綠色背景消失後仍然看到第1部分內容文字...我想讓它消失在同一時間綠色背景消失 –

過渡css屬性使內容看到兩次

回答

相關問題