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

Rocer發表於2018-12-19
CSSReact

宣告：本筆記為示例程式碼，並非工作中生產環境原始碼。

表單單項或者雙項展開

使用純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;
}
複製程式碼

本人才疏學淺，以上僅為個人見解，歡迎批評指正討論~~

相關文章