如何解决如何为 React Modal 设置动画?
我正在开发一个 sharetribe 模板,我有一个我想要动画的 react 模态,但它不起作用,我不知道为什么。我所做的尝试解决这个问题是将 closeTimeoutMS={500}
添加到 CSS 中的 <Modal />
和 .ReactModal__...
样式。我将在下面留下代码。希望有人能帮助我。
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React,{ Component } from 'react';
import { Modal } from '../../components';
import { withViewport } from '../../util/contextHelpers';
import css from './ModalInMobile.module.css';
class ModalInMobileComponent extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,};
this.handleClose = this.handleClose.bind(this);
this.changeOpenStatus = this.changeOpenStatus.bind(this);
}
// not relevant code was here //
// We have 3 view states:
// - default desktop layout (just an extra wrapper)
// - mobile layout: content visible inside modal popup
// - mobile layout: content hidden
const closedClassName = isClosedInMobile ? css.modalHidden : null;
const classes = classNames({ [css.modalInMobile]: isOpenInMobile },css.root,className);
return (
<Modal
className={classes}
containerClassName={containerClassName || css.modalContainer}
contentClassName={css.modalContent}
id={id}
isOpen={isOpen}
isClosedClassName={closedClassName}
onClose={this.handleClose}
closeButtonMessage={closeButtonMessage}
onManageDisableScrolling={onManageDisableScrolling}
closeTimeoutMS={500}
>
{children}
</Modal>
);
}
}
.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);
}
解决方法
Flex 模板使用 CSS Modules,因此命名类的语法更容易一些(无需使用 BEM)。
您可以在 ModalInMobile.module.css 中添加类似的内容:
@keyframes animateModal {
0% {
top: -20px;
}
100% {
top: 0;
}
}
.root {
width: 100%;
animation-name: animateModal;
animation-duration: 0.3s;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
注意:.root 类名在这一行传递给组件:
const classes = classNames({ [css.modalInMobile]: isOpenInMobile },css.root,className);
您可以从此处阅读有关 FTW 模板的更多信息:https://www.sharetribe.com/docs/ftw-styling/how-to-customize-ftw-styles/#find-the-component-to-change-its-styles
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。