基于react的高度过渡组件

silvertheo 发布于2019-08-23 14:14 / 3222人阅读

摘要：开发中，最麻烦的过渡效果就是高度过渡。因为过渡效果需要设置一个起始状态和结束状态，但是对于中的元素来说，容器高度大部分是根据内部元素自动撑起来的，这时很难去设置一个稳定的过渡高度。所以我写了一个基于的组件来自动完成高度过渡这一实现。

开发中，最麻烦的过渡效果就是高度过渡。因为过渡效果需要设置一个起始状态和结束状态，但是对于web中的元素来说，容器高度大部分是根据内部元素自动撑起来的，这时很难去设置一个稳定的过渡高度。所以我写了一个基于react的组件来自动完成高度过渡这一实现。

使用方法：

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

具体使用：

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

// 在元素显示隐藏时进行过渡

  {
    this.state.show && (
      
        placeholder

        placeholder

        placeholder

        placeholder

      
    )
  }

// 设置一个最小高度，然后切换进行过渡。通常用于 查看更多 显示详情

    
        placeholder

        placeholder

        placeholder

        placeholder

github地址：auto-height-transition

GPU云服务器云服务器 div的高度状态栏的高度 html窗口的高度数的高度 java

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100313.html

指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

Benedict Evans 2019-08-23 13:55 评论0 收藏0
简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

Cc_2011 2019-08-02 12:12 评论0 收藏0
简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

JackJiang 2019-08-29 17:31 评论0 收藏0
GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0