React实现动效弹窗组件


Posted in Javascript onJune 21, 2021

我们在写一些 UI 组件时,若不考虑动效,就很容易实现,主要就是有无的切换(类似于 Vue 中的 v-if 属性)或者可见性的切换(类似于 Vue 中的 v-show 属性)。

1. 没有动效的弹窗

在 React 中,可以这样来实现:

interface ModalProps {
  open: boolean;
  onClose?: () => void;
  children?: any;
}
const Modal = ({open. onClose, children}: ModalProps) => {
  if (!open) {
    return null;
  }
  return createPortal(<div>
    <div classname="modal-content">{children}</div>
    <div classname="modal-close-btn" onclick="{onClose}">x</div>
  </div>, document.body);
};

使用方式:

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div classname="app">
      <button onclick="{()" ==""> setOpen(true)}>show modal</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        modal content
      </modal>
    </div>
  );
};

我们在这里就是使用open属性来控制展示还是不展示,但完全没有渐变的效果。

若我们想实现 fade, zoom 等动画效果,还需要对此进行改造。

2. 自己动手实现有动效的弹窗

很多同学在自己实现动效时,经常是展示的时候有动效,关闭的时候没有动效。都是动效的时机没有控制好。这里我们先自己来实现一下动效的流转。

刚开始我实现的时候,动效只有开始状态和结束状态,需要很多的变量和逻辑来控制这个动效。

后来我参考了react-transition-group组件的实现,他是将动效拆分成了几个部分,每个部分分别进行控制。

  1. 展开动效的顺序:enter -> enter-active -> enter-done;
  2. 关闭动效的顺序:exit -> exit-active -> exit-done;

动效过程在enter-activeexit-active的过程中。

我们再通过一个变量 active 来控制是关闭动效是否已执行关闭,参数 open 只控制是执行展开动效还是关闭动效。

当 open 和 active 都为 false 时,才销毁弹窗。

const Modal = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // 弹窗的存在周期

  if (!open && !active) {
    return null;
  }

  return ReactDOM.createPortal(
    <div classname="modal">
      <div classname="modal-content">{children}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    document.body,
  );
};

这里我们接着添加动效过程的变化:

const [aniClassName, setAniClassName] = useState(''); // 动效的class

// transition执行完毕的监听函数
const onTransitionEnd = () => {
  // 当open为rue时,则结束状态为'enter-done'
  // 当open未false时,则结束状态为'exit-done'
  setAniClassName(open ? 'enter-done' : 'exit-done');

  // 若open为false,则动画结束时,弹窗的生命周期结束
  if (!open) {
    setActive(false);
  }
};

useEffect(() => {
  if (open) {
    setActive(true);
    setAniClassName('enter');
    // setTimeout用来切换class,让transition动起来
    setTimeout(() => {
      setAniClassName('enter-active');
    });
  } else {
    setAniClassName('exit');
    setTimeout(() => {
      setAniClassName('exit-active');
    });
  }
}, [open]);

Modal 组件完整的代码如下:

const Modal = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // 弹窗的存在周期
  const [aniClassName, setAniClassName] = useState(''); // 动效的class
  const onTransitionEnd = () => {
    setAniClassName(open ? 'enter-done' : 'exit-done');
    if (!open) {
      setActive(false);
    }
  };

  useEffect(() => {
    if (open) {
      setActive(true);
      setAniClassName('enter');
      setTimeout(() => {
        setAniClassName('enter-active');
      });
    } else {
      setAniClassName('exit');
      setTimeout(() => {
        setAniClassName('exit-active');
      });
    }
  }, [open]);

  if (!open && !active) {
    return null;
  }

  return ReactDOM.createPortal(
    <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
      <div classname="modal-content">{children}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    document.body,
  );
};

动效的流转过程已经实现了,样式也要一起写上。比如我们要实现渐隐渐现的 fade 效果:

.enter {
  opacity: 0;
}
.enter-active {
  transition: opacity 200ms ease-in-out;
  opacity: 1;
}
.enter-done {
  opacity: 1;
}
.exit {
  opacity: 1;
}
.exit-active {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.exit-done {
  opacity: 0;
}

如果是要实现放大缩小的 zoom 效果,修改这几个 class 就行。

一个带有动效的弹窗就已经实现了。

使用方式:

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div classname="app">
      <button onclick="{()" ==""> setOpen(true)}>show modal</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        modal content
      </modal>
    </div>
  );
};

点击链接自己实现动效的 React 弹窗 demo查看效果。

类似地,还有 Toast 之类的,也可以这样实现。

3. react-transition-group

我们在实现动效的思路上借鉴了 react-transition-group 中的CSSTransition组件。CSSTransition已经帮我封装好了动效展开和关闭的过程,我们在实现弹窗时,可以直接使用该组件。

这里有一个重要的属性:unmountOnExit,表示在动效结束后,卸载该组件。

const Modal = ({ open, onClose }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // in属性为true/false,true为展开动效,false为关闭动效
  return createPortal(
    <csstransition in="{open}" timeout="{200}" unmountonexit="">
      <div classname="modal">
        <div classname="modal-content">{children}</div>
        <div classname="modal-close-btn" onclick="{onClose}">
          x
        </div>
      </div>
    </csstransition>,
    document.body,
  );
};

在使用 CSSTransition 组件后,Modal 的动效就方便多了。

React实现动效弹窗组件

4. 总结

至此已把待动效的 React Modal 组件实现出来了。虽然 React 中没有类似 Vue 官方定义的<transition>标签,不过我们可以自己或者借助第三方组件来实现。

以上就是React实现动效弹窗组件的详细内容,更多关于React弹窗组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
vue filters的使用详解
Jun 11 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
帮你提高开发效率的JavaScript20个技巧
JavaScript实现贪吃蛇游戏
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
PHPMailer安装方法及简单实例
2008/11/25 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP查询分页的实现代码
2017/06/09 PHP
php多进程应用场景实例详解
2019/07/22 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
javascript每日必学之多态
2016/02/23 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
javascript表单正则应用
2017/02/04 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python计算n的阶乘的方法代码
2019/10/25 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python 创建TCP服务器的方法
2020/07/28 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
品牌服务方案
2014/06/03 职场文书
运动员获奖感言
2014/08/15 职场文书
个人委托书范本汇总
2014/10/01 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书