CODEWITHSUNDEEP
javascriptcssreactjstransitionreact-modal
Robert Bogos
Robert Bogos

Reputation: 43

How to animate React Modal?

I am working on a sharetribe template and I hava a react Modal that I want to animate, but it doesn't work and I don't know why. What I did to try so solve this is adding closeTimeoutMS={500} to the <Modal /> and the .ReactModal__... styles in CSS. I will leave the code below. Hope someone can help me.

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);
}

Upvotes: 0

Views: 3631

Answers (1)

Gnito
Gnito

Reputation: 71

Flex templates use CSS Modules so the syntax of naming classes is a bit easier (no need to use BEM).

You could add something like this in 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;
}

Note: .root class name is passed to the component in this line:

const classes = classNames({ [css.modalInMobile]: isOpenInMobile }, css.root, className);

You could read more about FTW templates from here: https://www.sharetribe.com/docs/ftw-styling/how-to-customize-ftw-styles/#find-the-component-to-change-its-styles

Upvotes: 1

Related Questions