利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处为事件响应热区,点击后展开或收起红框2的内容。

这个 动画我们需要考虑以下几点:

1. 红框2的容器为屏幕的100%,内容字数不固定,但有最大字数限制;

2. 红框2相同字数的内容在不同尺寸屏幕下的高度不同;

3. 不使用任何动画框架。

我们在制作下拉展开动画的时候,一般首先会想到将内容节点的高度设置为0,然后事件触发将内容节点的高度设为展开后的值。这种方法在内容固定并且容器宽度固定的场景下没有问题,但是并不适用与屏幕尺寸不统一的移动设备。

那么该怎么做呢?关键字:max-height!移动设备的特点之一,便是其浏览器对css属性和动画支持的很好,我们可以大胆的使用。细节如下:

1. 将容器收起状态的max-height设置为0,展开状态为一个足够大的值(综合考虑最大字数限制以及屏幕尺寸);

2. 展开状态的高度值建议采用rem单位,具体取值还需要考虑屏幕尺寸。

简易demo如下,因demo无法模拟移动设备的多屏尺寸,大家可以改变container的宽度模拟,当然,移动设备上container的宽度取值为100%:

See the Pen 不同尺寸移动设备下拉动画适配 by Joe (@ihardcoder) on CodePen.

用max-height实现有一个缺点,大家应该会发现,展开和收起的动画快慢不一样!这个缺陷并不容易弥补,但是可以通过媒体查询精良精确展开状态的max-height取值来弥补。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

【Appetite】ionic3实录(三)修改自定义图标

我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。

10320
来自专栏编程

前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法,并展示了一个基本的例子,这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示,css包含非常多的样式设置,...

20260
来自专栏QQ音乐技术团队的专栏

iOS 开发之动画中的时间

在 iOS 开发中使用动画时,可以通过设置动画的 duration、speed、begintime、offset 属性,来设置动画的时长、速度、起始时间及起始偏...

37100
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

11810
来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

28850
来自专栏腾讯IVWEB团队的专栏

bodymovin 的使用场景初步调研

bodymovin 不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。

1.2K00
来自专栏木子墨的前端日常

到底该用img还是background-image?

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

49110
来自专栏向治洪

CollapsingToolbarLayout使用

我们来看一下CollapsingToolbarLayout的使用场景。 ? CollapsingToolbarLayout 可以看到,Toolbar的标题放...

24660
来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

46650
来自专栏乐百川的学习频道

Animate.css 动画库介绍

一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库Animate.css。 animate.css在线效果用一...

394100

扫码关注云+社区

领取腾讯云代金券