滑動動效解決方案（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;
}
複製代碼

本人才疏學淺，以上僅爲我的看法，歡迎批評指正討論~~