如何使用CSS添加過渡效果

-1

我玩過以下代碼，在點擊時輕輕緩和轉換效果。切換元素打開本身非常快速和困難。我想讓它變得更柔和。其實我不知道哪個班級或ID或選擇器會影響它。如何使用CSS添加過渡效果

演示：jsfiddle

CSS：

.toggle-box + label:before { 
    background-color: #4F5150; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    color: #FFFFFF; 
    content: "+"; 
    display: block; 
    float: left; 
    font-weight: bold; 
    height: 20px; 
    line-height: 20px; 
    margin-right: 5px; 
    text-align: center; 
    width: 20px; 
}

來源

2017-03-10 DaF-Student

你可以改變以下規則是這樣的：

.toggle-box + label + div { 
    max-height: 0; 
    margin-bottom: 10px; 
    transition: max-height 0.15s linear; 
    overflow: hidden; 
} 

.toggle-box:checked + label + div { 
    height: auto; 
    max-height: 1000px; 
    transition: max-height 3s linear; 
}

最大高度需要被設置好的一個值，你的DIV將永遠達不到。

這裏更新jsfiddle

來源

2017-03-10 15:36:14 Fabio

開幕過渡效果很好，但同時關閉它仍然是非常快的，順便在那裏也有機會接近對方一個，當我打開其中任何一個？ –

你可以在轉換屬性中使用值（在這種情況下，關閉時爲0.15s，開啓時爲3s），但關閉時需要快，因爲存在「+」問題，點擊時立即切換爲「 - 」 – Fabio

關閉另一個你必須使用JavaScript或jQuery – Fabio

如何使用CSS添加過渡效果

回答

相關問題