Improve performance of modal and swipe animations (#5135)

* Improve performance of modal and swipe animations

* Fix eslint issues
This commit is contained in:
Nolan Lawson 2017-09-28 11:43:18 -07:00 committed by Eugen Rochko
parent 3406e30526
commit 6e0659c838
3 changed files with 40 additions and 41 deletions

View file

@ -84,14 +84,17 @@ export default class MediaModal extends ImmutablePureComponent {
return null; return null;
}).toArray(); }).toArray();
const containerStyle = {
alignItems: 'center', // center vertically
};
return ( return (
<div className='modal-root__modal media-modal'> <div className='modal-root__modal media-modal'>
{leftNav} {leftNav}
<div className='media-modal__content'> <div className='media-modal__content'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<ReactSwipeableViews containerStyle={containerStyle} onChangeIndex={this.handleSwipe} index={index}>
<ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index} animateHeight>
{content} {content}
</ReactSwipeableViews> </ReactSwipeableViews>
</div> </div>

View file

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import spring from 'react-motion/lib/spring';
import BundleContainer from '../containers/bundle_container'; import BundleContainer from '../containers/bundle_container';
import BundleModalError from './bundle_modal_error'; import BundleModalError from './bundle_modal_error';
import ModalLoading from './modal_loading'; import ModalLoading from './modal_loading';
@ -35,6 +33,10 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };
state = {
revealed: false,
};
handleKeyUp = (e) => { handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.type) { && !!this.props.type) {
@ -51,6 +53,8 @@ export default class ModalRoot extends React.PureComponent {
this.activeElement = document.activeElement; this.activeElement = document.activeElement;
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
} else if (!nextProps.type) {
this.setState({ revealed: false });
} }
} }
@ -60,6 +64,11 @@ export default class ModalRoot extends React.PureComponent {
this.activeElement.focus(); this.activeElement.focus();
this.activeElement = null; this.activeElement = null;
} }
if (this.props.type) {
requestAnimationFrame(() => {
this.setState({ revealed: true });
});
}
} }
componentWillUnmount () { componentWillUnmount () {
@ -74,14 +83,6 @@ export default class ModalRoot extends React.PureComponent {
this.node = ref; this.node = ref;
} }
willEnter () {
return { opacity: 0, scale: 0.98 };
}
willLeave () {
return { opacity: spring(0), scale: spring(0.98) };
}
renderLoading = modalId => () => { renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null; return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
} }
@ -94,38 +95,30 @@ export default class ModalRoot extends React.PureComponent {
render () { render () {
const { type, props, onClose } = this.props; const { type, props, onClose } = this.props;
const { revealed } = this.state;
const visible = !!type; const visible = !!type;
const items = [];
if (visible) { if (!visible) {
items.push({ return (
key: type, <div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
data: { type, props }, );
style: { opacity: spring(1), scale: spring(1, { stiffness: 120, damping: 14 }) },
});
} }
return ( return (
<TransitionMotion <div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
styles={items} <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
willEnter={this.willEnter} <div role='presentation' className='modal-root__overlay' onClick={onClose} />
willLeave={this.willLeave} <div role='dialog' className='modal-root__container'>
> {
{interpolatedStyles => visible ?
<div className='modal-root' ref={this.setRef}> (<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{interpolatedStyles.map(({ key, data: { type, props }, style }) => (
<div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
<div role='dialog' className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />} {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
</BundleContainer> </BundleContainer>) :
</div> null
</div>
))}
</div>
} }
</TransitionMotion> </div>
</div>
</div>
); );
} }

View file

@ -2983,14 +2983,18 @@ button.icon-button.active i.fa-retweet {
} }
} }
.modal-root {
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}
.modal-root__overlay { .modal-root__overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 9999;
opacity: 0;
background: rgba($base-overlay-background, 0.7); background: rgba($base-overlay-background, 0.7);
transform: translateZ(0); transform: translateZ(0);
} }
@ -3007,7 +3011,6 @@ button.icon-button.active i.fa-retweet {
justify-content: center; justify-content: center;
align-content: space-around; align-content: space-around;
z-index: 9999; z-index: 9999;
opacity: 0;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }