使用「max-height」实现自适应高度
2013-08-07 19:59
162 查看
.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>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/ayayak/1/edit -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->
<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>
运行代码
相关文章推荐
- 使用padding代替高度实现背景图片高度按比例自适应
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
- IE6实现最小高度min-height和最大高度max-height
- 使用javascript实现Iframe自适应高度
- 使用glide 如何实现高度自适应t图片:
- iOS 使用Autolayout实现cell的高度自适应
- 使用javascript实现Iframe自适应高度
- 使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
- 不使用定时器实现iframe的自适应高度
- 使用弹性盒布局来实现元素宽度与高度的自适应
- Android使用ViewPager实现图片轮播(高度自适应,左右循环,自动轮播)
- iOS开发-使用storyboard实现UILabel的自适应高度(iOS8)
- 使用CSS实现自适应高度和底部对齐
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
- iOS开发-使用storyboard实现UILabel的自适应高度(iOS8)
- 使用RecyclerView实现的瀑布流高度自适应
- iOS autolayout自适应cell高度时使用estimatedRowHeight的一些问题
- Swift 使用SnapKit实现 UICollectionViewCell 高度自适应
- 使用RecyclerView实现的瀑布流高度自适应
- css div自适应高度height