时间戳

首页 > 解决方案 > 如何为 React Modal 设置动画？

javascript - 如何为 React Modal 设置动画？

问题描述

我正在研究一个共享部落模板，我有一个想要动画的反应模态，但它不起作用，我不知道为什么。我为解决这个问题所做的尝试是添加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);
}

标签： javascriptcssreactjstransitionreact-modal

解决方案

Flex 模板使用CSS 模块，因此命名类的语法更容易一些（无需使用 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

推荐阅读