cslide

A slide plugin for scene project.

背景

• 在近期所做项目中遇到一种需要下拉收起的场景,类似于google中关键字为"清华大学"的应用场景,展开后超出一屏高度,收起则只保留下拉按钮即可,但尝试了好几种下拉收起的动画方案都不能如愿,所以想尝试一下实现一个类似于google下拉收起的动画应用到项目中.

原来的方案问题

• 由于展开超出一屏,用普通思路用CSS3或者JS动画去改变容器的高度会引起后面9条结果的回流,导致在移动端的卡顿现象,体验差.

• 收起时候,下拉按钮收至屏幕顶部,收起后需要把scrollTop定到适合的地方,往往展开后与收起后scrollTop距离相差太大,如果不使用动画在移动端由于渲染速度跟不上的原因,会在跳上去的瞬间偶尔会闪白一下,如果使用动画,在安卓手机中,动画卡顿基本无法直视.

• 其他各种第三方浏览器中,scrollTop的不一定导致的一些瑕疵.

动画分析

• 施工中

实现过程

• 施工中

DEMO

• 施工中