使用「max-height」实现自适应高度




.tab-content{
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .8s;
  -moz-transition: max-height .8s;
  -ms-transition: max-height .8s;
  -o-transition: max-height .8s;
  transition: max-height .8s;
}

.tab{
    list-style-type: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
  overflow: hidden;
  
  border:1px solid #CCC;
  border-radius:5px;
  
  /* 动画差 */
  
  -webkit-transition: max-height .2s;
  -moz-transition: max-height .2s;
  -ms-transition: max-height .2s;
  -o-transition: max-height .2s;
  transition: max-height .2s;

}


.tab h2{
  cursor:pointer;
  padding:10px 20px;
  background: #EEE;
  border-top:1px solid #BBB;
  border-bottom:1px solid #BBB;
  margin:-1px 0;
  color:#333;
  
  -webkit-transition: background .3s;
  -moz-transition: background .3s;
  -ms-transition: background .3s;
  -o-transition: background .3s;
  transition: background .3s;
}

.tab h2:hover{
  background: lightblue;
}

.tab h2:hover ~ .tab-content{// 开始动画
  max-height: 200px;
}

 <h1>CSS3 缓动手风琴动画效果（一丝）</h1>
    <p>使用「max-height」实现自适应高度</p>
	<ul class="tab">
      <li>
        <h2>选项卡1</h2>
        <div class="tab-content">
        <p>隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
        </p>
        </div>
      </li>
      <li>
        <h2>选项卡2</h2>
        <div class="tab-content">
        <p>隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字
        </p>
        </div>
      </li>
	</ul>

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta name ="viewport" content ="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-title" content="测试">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="format-detection" content="telephone=no" />
  
  <title>CSS3 缓动手风琴动画效果-by 一丝</title>
  <style>
    *{-webkit-tap-highlight-color: rgba(0,0,0,0);}
    
  </style>

h1{
  font-size: 22px;
}

h2{
  font-size: 18px;
  font-weight: normal;
}

.main{
  360px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

ul{
  list-style-type: none;
  list-style-image: none;
}
p{
  line-height: 1.8;
  margin:15px 20px;
}

.tab-content{
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .8s;
  -moz-transition: max-height .8s;
  -ms-transition: max-height .8s;
  -o-transition: max-height .8s;
  transition: max-height .8s;
}

.tab{
  margin-top: 10px;
  overflow: hidden;
  
  border:1px solid #CCC;
  border-radius:5px;
  
  /* 动画差 */
  
  -webkit-transition: max-height .2s;
  -moz-transition: max-height .2s;
  -ms-transition: max-height .2s;
  -o-transition: max-height .2s;
  transition: max-height .2s;

}

.tab h2{
  cursor:pointer;
  padding:10px 20px;
  background: #EEE;
  border-top:1px solid #BBB;
  border-bottom:1px solid #BBB;
  margin:-1px 0;
  color:#333;
  
  -webkit-transition: background .3s;
  -moz-transition: background .3s;
  -ms-transition: background .3s;
  -o-transition: background .3s;
  transition: background .3s;
}

.tab h2:hover{
  background: lightblue;
}

.tab h2:hover ~ .tab-content{
  max-height: 200px;
}
</style>
</head>
<body>
  <div class="main">
    <h1>CSS3 缓动手风琴动画效果（一丝）</h1>
    <p>使用「max-height」实现自适应高度</p>
	<ul class="tab">
      <li>
        <h2>选项卡1</h2>
        <div class="tab-content">
        <p>隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
        </p>
        </div>
      </li>
      <li>
        <h2>选项卡2</h2>
        <div class="tab-content">
        <p>隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字<br>
          隐藏的文字
        </p>
        </div>
      </li>
	</ul>
    </div>

</body>
</html>