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

最新推荐文章于 2022-07-29 20:21:07 发布

weixin_34245169

最新推荐文章于 2022-07-29 20:21:07 发布

阅读量973

点赞数

文章标签： javascript ViewUI





.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> <style id="jsbin-css"> *{ margin: 0; padding: 0; } body{ font-family: 'helvetica neue', 'hiragino sans gb', stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53, sans-serif; font-size: 14px; } h1{ font-size: 22px; } h2{ font-size: 18px; font-weight: normal; } .main{ width: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>

运行代码

weixin_34245169

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用「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 ...
复制链接

扫一扫