利用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取值来弥补。

转载于:https://www.cnblogs.com/ihardcoder/p/4500024.html

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

android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...
Android开发中利用ListView实现一个渐变式的下拉刷新动画发布时间:2020-11-23 16:50:31 来源:亿速云阅读:80 作者:Leah 本篇文章给大家分享的是有关Androi ...
html点击文字下拉,利用jQuery实现可输入搜索文字的下拉框
先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var $xialaSELECT; $(docum ...
Bootstrap按钮下拉菜单的尺寸
按钮下拉菜单的尺寸定义按钮下拉菜单时,无论是按钮下拉菜单,还是拼接式按钮下拉菜单,都可以使用按钮的尺寸类 .btn-lg.或.btn-sm或.btn-xs,来设置按钮的尺寸.如: <!-- L ...
LG显示将在坡州工厂为iPhone 14 Pro Max生产120Hz刷新率屏幕
近日,据国外媒体报道,有韩国媒体日前在报道中表示,LG显示将在明年为iPhone 14 Pro Max供应部分支持120Hz刷新率的LTPO TFT OLED屏幕,三星显示将不再是高端iPhone所需 ...
h5游戏：适应不同尺寸屏幕的WEB2048
一.界面展示及简单介绍先上完成后不同尺寸屏幕下的效果图,界面模仿的原版2048: (768px<屏幕) (500px<屏幕<768px) (小于500px的超小屏幕) 原来预想左边 ...
oracle使用max提升效率,Oracle调优之利用max与leftjoin来进行不同表之间匹配
需求有两个不同的表,A表是基础数据,B表根据A表的某个不重复关键字加其他一些条件查询出一条或几条数据,取其中一条数据.并且利用此数据某个关键字再在B表中查询下一层级数据,最终将A表的对应一条数据,B ...
python批量生成图片_利用Python批量生成任意尺寸的图片
实现效果通过源图片,在当前工作目录的/img目录下生成1000张,分别从1*1到1000*1000像素的图片. 效果如下: 目录结构实现示例 # -*- coding: utf-8 -*- imp ...
python批量生成图_利用Python批量生成任意尺寸的图片
实现效果通过源图片,在当前工作目录的/img目录下生成1000张,分别从1*1到1000*1000像素的图片. 效果如下: 目录结构实现示例 # -*- coding: utf-8 -*- imp ...
利用Max ，Break，AO贴图
利用Max 来烘焙AO(光影关系)贴图. Maya中也可以烘焙,但是烘焙的效果没有Max的强大. 所以利用Max烘光影相对来说好一些. 这里上一个连接,方便学习. http://www.cgmol. ...

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

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

最新文章

热门文章