最大高度過渡不工作？

Question

1. 我想使用純CSS化妝collape面板像引導 bootstrap collapse panel

2. 但最大高度過渡不工作，爲什麼呢？

3. 如何切換面板，如果我檢查，我想，當我加倍面板崩潰點擊

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 
    
 
    .content { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #ccc; 
 
    margin:40px auto; 
 
    border:1px solid #eee; 
 
    } 
 
    label{ 
 
    \t padding:10px; 
 
    } 
 
    .content>div{ 
 
    \t width:100%; 
 
    \t transition: all ease 1s; 
 
    } 
 
    p{ 
 
    word-break: break-word; 
 
    height: 0%; 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    transition: max-height ease 1s; 
 
    } 
 
    input[type=radio]{ 
 
    \t transition: all ease 1s; 
 
    \t -webkit-appearance:none; 
 
    } 
 

 
    label:hover+input+p{ 
 
\t max-height: 100%; 
 
    }

<div class="content"> 
 
    <div> 
 
     <label for="demo1">demo1</label> 
 
     <input type="radio" name='demo' id='demo1'> 
 
     <p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p> 
 
    </div> 
 
    <div> 
 
     <label for="demo2">demo2</label> 
 
     <input type="radio" name='demo' id='demo2'> 
 
     <p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji ;dfokj</p> 
 
    </div> 
 
    <div> 
 
     <label for="demo3">demo3</label> 
 
     <input type="radio" name='demo' id='demo3'> 
 
     <p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p> 
 
    </div>

link in JSfidle

Answer 1

在每次radio:checked，你可以給transitionp tagopacity和height，如下，

（加上+選擇器） - 選擇被輸入元件之後放置在這裏，就像這裏p被放置輸入畢竟獨立元件。

的最大高度屬性用於設置一個 元件的最大高度。它可以防止 中的高度屬性的使用值變得大於爲最大高度指定的值。

.content{ 
 
    width:400px; 
 
    height:400px; 
 
    border:1px solid #ccc; 
 
    margin:auto; 
 
} 
 
p{ 
 
    height:0px; 
 
    opacity:0; 
 
    word-break:break-word; 
 
    transition:all 0.6s ease; 
 
} 
 
input[type="radio"]{ 
 
    -webkit-appearance:none; 
 
} 
 
input[type="radio"]:checked + p{ 
 
    height:50px; 
 
    opacity:1; 
 
}

<div class="content"> 
 
    <div> 
 
     <label for="demo1">demo1</label> 
 
     <input type="radio" name='demo' id='demo1'> 
 
     <p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p> 
 
    </div>  
 
    <div> 
 
     <label for="demo2">demo2</label> 
 
     <input type="radio" name='demo' id='demo2'> 
 
     <p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji ;dfokj</p> 
 
    </div> 
 
    
 
    <div> 
 
     <label for="demo3">demo3</label> 
 
     <input type="radio" name='demo' id='demo3'> <p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p> 
 
    </div>