.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>

运行代码

使用「max-height」实现自适应高度的更多相关文章

  1. 怎样让自定义Cell的图片和文本自适应高度

    Let's do it! 首先创建一个Model类 包括一个图片名称属性 还有文字内容属性 #import <Foundation/Foundation.h> @interface Mod ...

  2. Html-Css-iframe的自适应高度方案

    先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> ...

  3. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

  4. [转载]再谈iframe自适应高度

    Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲: 通过Google搜索iframe 自适应高度,结果5W多条,搜索 ...

  5. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  6. 关于使用iframe标签自适应高度的使用

    在ifrome内设定最小高度,(此方法只适用于页面内切换高度不一.但是会保留最大高度,返回后保持最大高度不再回到最初页面的高度) <iframe id="one4" widt ...

  7. Iframe 自适应高度

    网页中,经常遇见嵌套问题.我们怎么解决好点,我个人喜欢使用 Html 中的 Iframe 标签.忘记在哪里找的代码了. Iframe 的代码: <iframe src="indexpa ...

  8. IOS Swift语言开发 tableView的重用以及自cell的自适应高度

    http://www.aichengxu.com/iOS/11143168.htm 一.准备数据 (这是一个元组,第一个元素为英雄的名字;第二个元素为英雄头像图片的名字,格式为.PNG,如果为其他的格 ...

  9. 「Android 开发」入门笔记

    「Android 开发」入门笔记(界面编程篇) ------每日摘要------ DAY-1: 学习笔记: Android应用结构分析 界面编程与视图(View)组件 布局管理器 问题整理: Andr ...

随机推荐

  1. objective-c 与 js之间传递中文乱码

    最近在做关于js改写oc framework的小project,遇到了不少问题 其中刚遇到的是关于如何在两者之间传递中文字符,带特殊字符的URL字符串 不会很详细的介绍太多,以后会回头做个总结 oc传 ...

  2. URAL1513. Lemon Tale（dp）

    1513 这题好久之前就看过了,悲催的是当时看题解都没看懂,今天又看了看so easy... n个B里不能出现超过连续k个L的情况 一维递推就可以 两种情况 1.dp[i] += dp[i-1] 在i ...

  3. JSON 之 SuperObject(7): 可以省略的双引号

    在 JSON 中, 字符串应该在双引号中; 从上个例子才发现: 原来这个双引号可以省略, 有空格都行 当然只是在程序代码中可以省略, 对象会自动识别添加的. 即如此, 下面写法都可以: uses Su ...

  4. CSS之剪切横幅

    简述 clip-path属性指定一个应用到元素上的剪切路径.应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path属性上.还可以使用CSS Shapes模块中的基 ...

  5. ASP.NET 4的Demo实践:URL路由改进支持

    从.NET框架3.5 SP1开始,微软推出了ASP.NET路由支持,从而实现了特定资源的URL与其对应的Web服务器上的物理文件之间的彻底解耦.借助于ASP.NET路由支持,开发人员可以定义一组路由规 ...

  6. [反汇编练习] 160个CrackMe之027

    [反汇编练习] 160个CrackMe之027. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  7. HDU 5375 Gray code 格雷码（水题）

    题意:给一个二进制数(包含3种符号:'0'  '1'  '?'  ,问号可随意 ),要求将其转成格雷码,给一个序列a,若转成的格雷码第i位为1,则得分+a[i].求填充问号使得得分最多. 思路:如果了 ...

  8. matlab注释使用，以及相应的注释快捷键

    1.多行注释 单行注释是加% %{ 若干语句 %} 2.快捷键 多行注释: 选中要注释的若干语句, 编辑器菜单Text-<Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释的语 ...

  9. PS4破解

    1.输入序列号: # 序列号: # 1330-1082-3503-2270-3738-6738# 1330-1776-8671-6289-7706-2916# 1330-1567-6599-8775- ...

  10. 【自动化测试】Selenium的智能等待

    dr.implicitly_wait(30) --- 智能等待 http://www.cnblogs.com/fnng/p/3214112.html =========== selenium 调用键盘 ...