滑动动效解决方案（CSS antd-mobile better-scroll react-transition-group）

声明：本笔记为示例代码，并非工作中生产环境源码。

表单单项或者双项展开

使用纯CSS,为需要动画展示的表单项加上如下代码：

overflow:hidden;
max-height:flag ? 0 : max-value;
transition: max-height 0.5s;
复制代码

其中flag是展开与否的标志，max-height可以设置一个大于等于滑动区最大可能高度的值。

整屏弹框

若需求为整屏弹框且弹框内内容为展示类或无过多非常规定位，可以使用antd-mobile的Modal插件。配置属性可以实现顶部、底部划入和淡入淡出等动画。只需要把弹框内容包裹到Modal内即可，以react为例：

import { Modal } from 'antd-mobile';
...
<Modal className="selectItem-wrapper" popup visible={this.state.flag} onClose={this.close} animationType="slide-up">
    //Modal content
</Modal>
...
复制代码

滑动嵌套

表示一个滑动元素内再嵌套一个滑动元素。且内部元素脱离文档流，会超出外部元素高度的情形。显然单双项展开项中的方法不适用，外部元素的overflow:hidden会影响内部元素的展示。需要引入动画生命周期，在外部元素下拉动画完之后将overflow:auto，收回动画时在设回overflow:hidden。以react为例，利用reactTransitionGroup，其中slides为需要动态控制overflow的滑动元素。render函数中：

<CSSTransition
    in={isShow}
    timeout={100}
    classNames="slide"
    unmountOnExit>
    ...//slide item
<CSSTransition>
复制代码

CSS：

.slides-enter {
    overflow: hidden;
    max-height: 0;
}
.slides-enter-active {
    overflow: hidden;
    max-height: 10;
}
.slides-enter-done {
    overflow: visible;
}
.slides-exit {
    overflow: hidden;
    max-height: 10;  
}
.slides-exit-active {
    overflow: hidden;
    max-height: 0;
}
.slides-exit-done {
    overflow:hidden;
}
复制代码

滑动中切换元素

例如滑动过程中表单从不可编辑状态变为可编辑状态。解决方法还是利用动画生命周期，假设不可编辑框大小为10，可编辑框大小为20。点击编辑按钮后，不可编辑DOM元素变成可编辑DOM元素，且保持高度为10，然后再动画展开到20。收起时，高度先由20滑动为10，然后调用动画完成钩子函数，改变为不可编辑状态。

reder函数中：

<CSSTransition
   in={isShow}
   timeout={100}
   classNames="slide"
   unmountOnExit
   onExited={() => {
       this.setState({
           isShowEdit: true,
       });
     }}>
   ...//Edit content or Ionf content
<CSSTransition>
复制代码

CSS：

.personal-enter {
    overflow: hidden;
    max-height: 10;
}
.personal-enter-active {
    overflow: hidden;
    max-height: 20;
    transition: all 0.3s;
}
.personal-done-enter {
    overflow: visible;
}
.personal-exit {
    overflow: hidden;
    max-height: 20;  
}
.personal-exit-active {
    overflow: hidden;
    max-height: 10;
    transition: all 0.3s;
}
.personal-done-exit {
    overflow:hidden;
}
复制代码

底部或顶部切入的页面中有绝对定位侧边栏等特殊定位

在Android中以上述的解决方案都可以应用到此例中且无任何bug。在IOS中上述方案会出现：

滑动卡顿

可以用 -webkit-overflow-scrolling:touch 属性解决。但此属性会引来更多的BUGGGG

position:fixed

此坑随意一查会有多种失效，留白等bug，但没有较为全面的总结。应对此情形的有效解决方案为弹出框可以用以上任意方案，但淡出页面内用better-scroll包裹。(滴滴大佬研发的滑动插件，无框架限制)。 better-scroll在react中的应用方式为，js文件：

import Bscroll from "better-scroll";
...
componentDidMount(){
    this.setState({ bScroll: new Bscroll(this.refs.bscroll, {probeType: 3,click: true}) });
}
...
componentDidUpdate() {
    //组件更新后，如果实例化了better-scroll并且需要刷新就调用refresh()函数
    if (this.state.bScroll) {
        this.state.bScroll.refresh();
    }
}
...
render(){
    ...
    <div  className="bscroll" ref="bscroll">
        <div className='bscroll-container'>
        ...//content
        </div>
    </div>
    ...
}
复制代码

CSS:

.bscroll {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
复制代码

本人才疏学浅，以上仅为个人见解，欢迎批评指正讨论~~