最大高度过渡不工作？

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>