css - 动画反应模态
问题描述
我的网络应用程序中有一个模态框,当用户单击“打开”按钮时,我想将其滑入。我正在使用react-transition-group来实现这一点。但我无法让动画正常工作。不知道这里有什么问题?
import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Modal from 'react-modal';
import './styles.css';
class Example extends React.Component {
state = {
isOpen: false,
};
toggleModal = () => {
this.setState(prevState => ({
isOpen: !prevState.isOpen,
}));
};
render() {
const modalStyles = {
overlay: {
backgroundColor: '#ffffff',
},
};
return (
<div>
<button onClick={this.toggleModal}>
Open Modal
</button>
<CSSTransition
in={this.state.isOpen}
timeout={300}
classNames="dialog"
>
<Modal
isOpen={this.state.isOpen}
style={modalStyles}
>
<button onClick={this.toggleModal}>
Close Modal
</button>
<div>Hello World</div>
</Modal>
</CSSTransition>
</div>
);
}
}
CSS 文件:
.dialog-enter {
left: -100%;
transition: left 300ms linear;
}
.dialog-enter-active {
left: 0;
}
.dialog-exit {
left: 0;
transition: left 300ms linear;
}
.dialog-exit-active {
left: -100%;
}
这是工作代码。
解决方案
这里的问题是 react-modal 使用 react-portal 作为其安装点。所以它不会被渲染为 CSSTransition 组件的子组件。因此,您不能将 CSSTransition 与它一起使用。
您可以使用一些自定义 css 来创建过渡效果。它在react-modal 文档中。
所以如果你把它添加到你的 CSS 中。会有过渡。
.ReactModal__Overlay {
opacity: 0;
transform: translateX(-100px);
transition: all 500ms ease-in-out;
}
.ReactModal__Overlay--after-open {
opacity: 1;
transform: translateX(0px);
}
.ReactModal__Overlay--before-close {
opacity: 0;
transform: translateX(-100px);
}
我们必须将 closeTimeoutMS 属性添加到模态,以便关闭动画起作用。
<Modal
closeTimeoutMS={500}
isOpen={this.state.isOpen}
style={modalStyles}
>
https://codesandbox.io/s/csstransition-component-forked-7jiwn
推荐阅读
- php - Wordpress:为角色中的所有用户设置一个密码,现有+未来注册
- encryption - 如何检查加密变量是否被解密?
- java - 如何在java中的集合中更新特定索引处的对象数组列表
- php - 将结帐自定义字段数据添加到运输包裹中,以便在 WooCommerce 中进行计算
- flutter - 如果没有定义宽度和高度,SingleChildScrollView 内的容器不会显示
- mysql - 为什么仅更改 WHERE 子句值时查询的运行速度会慢近 100 倍?
- c++ - 我的全局函数无法访问私有数据成员,即使使用了好友函数
- typescript - 在将新记录插入打字稿中的其他模型之前检查 Sequelize 模型中的值
- c# - 命名空间中不存在类型或命名空间名称(您是否缺少程序集引用?) - 无法引用类
- scala - 如何有效/干净地覆盖复制方法