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. 将普通用户添加至sudoers列表

    编辑/etc/sudoers文件,在尾部添加如下内容: myusername ALL=(ALL) ALL myusername ALL=(ALL) NOPASSWD: ALL 其中需要将红色部分替换成 ...

  2. Android自定义属性format类型

    1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = &quo ...

  3. linux的文件夹权限

    r:读取文件夹结构清单的权限,可以列出该文件夹下的所有文件. w:更改目录结构清单的能力,可以新建文件和目录,删除文件和目录(不管这个文件是否属于你),对文件和目录更名,移动文件和目录. x:具有x权 ...

  4. Android 禁止状态栏下拉

    同学项目用到Android 禁止状态栏下拉,我也迷茫,网上很多资料都不行,最终找到了下面一篇博客,感觉很不错,说的比较详细,供大家参考了 http://blog.csdn.net/u011913612 ...

  5. 使用 Xcode 5 生成和使用静态库

      本文转载至 http://blog.csdn.net/qq331436155/article/details/18363267   静态库Static Libraryiosxcode   在项目中 ...

  6. 解决xcode5升级后,Undefined symbols for architecture arm64:问题

    The issue is that the cocoapods have not been built for arm64 architecture yet thus they cannot be l ...

  7. 数据处理 数据入数据库 与 Excel

    Python  数据处理   中间数据 Excel   团队交流分工   低的沟通成本    数据入数据库 如postgresql

  8. Python菜鸟之路:sqlalchemy/paramiko进阶

    前言:ORM中的两种创建方式 数据库优先:指的是先创建数据库,包括表和字段的建立,然后根据数据库生成ORM的代码,它是先创建数据库,再创建相关程序代码 代码优先:就是先写代码,然后根据代码去生成数据库 ...

  9. 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  10. spring AOP操作

    在spring进行AOP操作,使用aspectj实现 一.aspectj准备 aspectj不是spring的一部分,和spring一起使用进行AOP的操作 1.除了spring基本的jar包还需要导 ...