t's starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move and resize elements any-which-way.

You can even get tricky and fake the animating of other properties with transforms. In this tutorial on the Google Chrome Developers Blog, Paul Lewis and Stephen McGruer explain how you can use a vertical scale transform to fake a height animation, while simultaneously triggering a vertical scale transform the other direction so nothing looks squished.

It's clever, performant, and useful. I moved a copy to CodePen to play with.

It sure is a bunch of code for such a simple result, though. What I'd preferto do as a developer is just have that click toggle a class, and the menuanimate to an auto dimension, and have it all happen performantly.

Building Performant Expand & Collapse Animations的更多相关文章

  1. Pivot Table系列之展开/折叠用法 (Expand/Collapse)

    1.遇到的问题: PivotTable中本来已经展开的维度的Hierarchy(层次结构),在切换切片器的数据集时,层次结构就折叠在一起了:没有按照之前的方式展开显示. 2.在做成PivotTable ...

  2. Jmeter 发测试报告到邮箱,expand/collapse 图片不显示

    由于发送到邮箱中html文件是不包含expand/collapse 资源文件的,所以导致邮箱中这两个图片没有显示,解决方法有两种: 1. 使用http能访问的图片链接地址 修改change中的图片资源 ...

  3. wesome-android

    awesome-android Introduction android libs from github System requirements Android Notice If the lib ...

  4. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  5. Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI

    1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybr ...

  6. Android 各版本信息 (维基百科)

    The following tables show the release dates and key features of all Android operating system updates ...

  7. Devexpress VCL Build v2013 vol 13.2.3 发布

    继续修修补补,大过年的,就不吐槽了. What's New in 13.2.3 (VCL Product Line)   New Major Features in 13.2 What's New i ...

  8. Devexpress VCL Build v2013 vol 13.2.2 发布

    devexpress 2013 的第二个大版本出来了,一如既往, 基本上还是一个大补丁包.各位看官,自己看. What's New in 13.2.2 (VCL Product Line)   New ...

  9. 使用HVTableView动态展开tableView中的cell

    使用HVTableView动态展开tableView中的cell 效果: 源码: HVTableView.h 与 HVTableView.m // // HVTableView.h // HRVTab ...

随机推荐

  1. 06 Memcached中的一些参数限制

    一: Memcached中的一些参数限制 Key的长度:250字节(二进制协议支持65536个字节) value的限制:1M ,一般都是存储一些文本,如新闻标题等等这个值足够了, 内存的限制:32位下 ...

  2. 【文献阅读】Self-Normalizing Neural Networks

    Self-Normalizing Neural Networks ,长达93页的附录足以成为吸睛的地方(给人感觉很厉害), 此paper提出了新的激活函数,称之为 SELUs ,其具有normaliz ...

  3. #define的使用方法体会

    #define 创建一个宏,该宏是标识符或參数化标识符与标记字符串的关联. 在定义宏之后.编译器可用标记字符串替换源文件里标识符的每一个匹配项. 双击以所有折叠.">语法 #defin ...

  4. mysql主从:主键冲突问题

    1.检查从库 show slave status \G; Slave_IO_Running: YesSlave_SQL_Running: No 2.出现类似如下的报错: Last_SQL_Error: ...

  5. 【BZOJ4927】第一题 双指针+DP(容斥?)

    [BZOJ4927]第一题 Description 给定n根直的木棍,要从中选出6根木棍,满足:能用这6根木棍拼 出一个正方形.注意木棍不能弯折.问方案数. 正方形:四条边都相等.四个角都是直角的四边 ...

  6. 九度OJ 1355:扑克牌顺子 (模拟)

    时间限制:2 秒 内存限制:32 兆 特殊判题:否 提交:1676 解决:484 题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^). ...

  7. JAVA NIO 简介 (netty源码死磕1.1)

    [基础篇]netty 源码死磕1.1:  JAVA NIO简介 1. JAVA NIO简介 Java 中 New I/O类库 是由 Java 1.4 引进的异步 IO.由于之前老的I/O类库是阻塞I/ ...

  8. 【python】-- 类的装饰器方法、特殊成员方法

    装饰器方法 类的另外的特性,装饰器方法:静态方法(staticmethod).类方法(classmethod).属性方法(property) 一.静态方法 在方法名前加上@staticmethod装饰 ...

  9. oracle chain

    [oracle@tyger dbs]$ sqlplus / as sysdba SQL*Plus: Release 10.2.0.1.0 - Production on Tue May 6 13:02 ...

  10. Activiti使用过程_1

    1 微信公众号: