.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. pl/sql programming 15 数据提取

    数据提取 -- 游标 游标只是一个指向某个结果集的指针. 声明游标: cursor employee_cur IS select * from employees; 打开游标: open employ ...

  2. Oracle数据库之四

    删除记录的SQL语句 delete from 表名[where 条件];(DML) 注意: 如果没有where子句,代表全部删除(慎用). delete也必须commit后才能生效 truncate也 ...

  3. LA 4670 (AC自动机 模板题) Dominating Patterns

    AC自动机大名叫Aho-Corasick Automata,不知道的还以为是能自动AC的呢,虽然它确实能帮你AC一些题目.=_=|| AC自动机看了好几天了,作用就是多个模式串在文本串上的匹配. 因为 ...

  4. Activity传递对象的方法

    //Serializeable传递对象的方法 public void SerializeMethod(){ Person mPerson = new Person(); mPerson.setName ...

  5. 【转】A*寻路算法 C++实现

    头文件:AStarPathFinding #ifndef ASTARPATHFINDING_H #define ASTARPATHFINDING_H #include <queue>//为 ...

  6. JS面向对象组件（四） -- 面向对象的继承

    什么是继承 •在原有对象的基础上,略作修改,得到一个新的对象 •不影响原有对象的功能 //父类 createPerson function createPerson(name,sex){ this.n ...

  7. Swift语法

    Swift语法 标签(空格分隔): Swift 1.打印输出语句 println("Hello, Swift!") 注意每行代码后面无需添加分号作为结束 2.简单值 let---常 ...

  8. android 拦截事件

    在做布局文件时,经常会有布局组件压在其它组件上面,这样点击上面布局没有控件的部分就会点中下面布局的控件. 如何拦截事件不让事件传递到下一层呢? 布局组件onTouchEvent() 用于处理事件,返回 ...

  9. 包装类-Character

    1,isDigit();是否是数字 char c = '1'; boolean bool = Character.isDigit(c); System.out.println(bool);//true ...

  10. [python]使用pexpect模块进行批量scp

    #!/usr/bin/env python# -*- coding: utf-8 -*- #wangxiaofei #awcloud自动化测试 import time,osimport threadi ...