基于react的高度過渡組件

silvertheo 發(fā)布于2019-08-23 14:14 / 3206人閱讀

摘要：開發(fā)中，最麻煩的過渡效果就是高度過渡。因?yàn)檫^渡效果需要設(shè)置一個(gè)起始狀態(tài)和結(jié)束狀態(tài)，但是對于中的元素來說，容器高度大部分是根據(jù)內(nèi)部元素自動撐起來的，這時(shí)很難去設(shè)置一個(gè)穩(wěn)定的過渡高度。所以我寫了一個(gè)基于的組件來自動完成高度過渡這一實(shí)現(xiàn)。

開發(fā)中，最麻煩的過渡效果就是高度過渡。因?yàn)檫^渡效果需要設(shè)置一個(gè)起始狀態(tài)和結(jié)束狀態(tài)，但是對于web中的元素來說，容器高度大部分是根據(jù)內(nèi)部元素自動撐起來的，這時(shí)很難去設(shè)置一個(gè)穩(wěn)定的過渡高度。所以我寫了一個(gè)基于react的組件來自動完成高度過渡這一實(shí)現(xiàn)。

使用方法：

首先npm install react-auto-height-transition -S

具體使用：

import {
    TransitionWhenHeightChange,
    TransitionWhenToggle
} from "react-auto-height-transition";

// 在元素顯示隱藏時(shí)進(jìn)行過渡

  {
    this.state.show && (
      
        placeholder

        placeholder

        placeholder

        placeholder

      
    )
  }

// 設(shè)置一個(gè)最小高度，然后切換進(jìn)行過渡。通常用于 查看更多 顯示詳情

    
        placeholder

        placeholder

        placeholder

        placeholder

github地址：auto-height-transition

云服務(wù)器 GPU云服務(wù)器 div的高度狀態(tài)欄的高度 html窗口的高度數(shù)的高度 java

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100313.html

相關(guān)文章

指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
簡易實(shí)踐的vue自定義tab入門

摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時(shí)的狀態(tài)。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡章節(jié)鏈接描述要想實(shí)現(xiàn)tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實(shí)現(xiàn)動畫效果條件渲...

Benedict Evans 2019-08-23 13:55 評論0 收藏0
簡易實(shí)踐的vue自定義tab入門

摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時(shí)的狀態(tài)。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡章節(jié)鏈接描述要想實(shí)現(xiàn)tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實(shí)現(xiàn)動畫效果條件渲...

Cc_2011 2019-08-02 12:12 評論0 收藏0
簡易實(shí)踐的vue自定義tab入門

摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時(shí)的狀態(tài)。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。本文基于vue官方文檔，分別為：動態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡章節(jié)鏈接描述要想實(shí)現(xiàn)tab動畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實(shí)現(xiàn)動畫效果條件渲...

JackJiang 2019-08-29 17:31 評論0 收藏0
GitHub 值得收藏的前端項(xiàng)目[每月更新...]

摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來，大家一起學(xué)習(xí)，本篇文章會持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

maxmin 2019-08-29 16:07 評論0 收藏0