commit: 6e0659c838bacfea54bbab5a4dd3501fbdf8b668
parent: 3406e305265e10c884c13f1d739cd2db5c1f18b6
Author: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 28 Sep 2017 11:43:18 -0700
Improve performance of modal and swipe animations (#5135)
* Improve performance of modal and swipe animations
* Fix eslint issues
Diffstat:
3 files changed, 40 insertions(+), 41 deletions(-)
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -84,14 +84,17 @@ export default class MediaModal extends ImmutablePureComponent {
return null;
}).toArray();
+ const containerStyle = {
+ alignItems: 'center', // center vertically
+ };
+
return (
<div className='modal-root__modal media-modal'>
{leftNav}
<div className='media-modal__content'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
-
- <ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index} animateHeight>
+ <ReactSwipeableViews containerStyle={containerStyle} onChangeIndex={this.handleSwipe} index={index}>
{content}
</ReactSwipeableViews>
</div>
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -1,7 +1,5 @@
import React from 'react';
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 BundleModalError from './bundle_modal_error';
import ModalLoading from './modal_loading';
@@ -35,6 +33,10 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired,
};
+ state = {
+ revealed: false,
+ };
+
handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.type) {
@@ -51,6 +53,8 @@ export default class ModalRoot extends React.PureComponent {
this.activeElement = document.activeElement;
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 = null;
}
+ if (this.props.type) {
+ requestAnimationFrame(() => {
+ this.setState({ revealed: true });
+ });
+ }
}
componentWillUnmount () {
@@ -74,14 +83,6 @@ export default class ModalRoot extends React.PureComponent {
this.node = ref;
}
- willEnter () {
- return { opacity: 0, scale: 0.98 };
- }
-
- willLeave () {
- return { opacity: spring(0), scale: spring(0.98) };
- }
-
renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
}
@@ -94,38 +95,30 @@ export default class ModalRoot extends React.PureComponent {
render () {
const { type, props, onClose } = this.props;
+ const { revealed } = this.state;
const visible = !!type;
- const items = [];
- if (visible) {
- items.push({
- key: type,
- data: { type, props },
- style: { opacity: spring(1), scale: spring(1, { stiffness: 120, damping: 14 }) },
- });
+ if (!visible) {
+ return (
+ <div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
+ );
}
return (
- <TransitionMotion
- styles={items}
- willEnter={this.willEnter}
- willLeave={this.willLeave}
- >
- {interpolatedStyles =>
- <div className='modal-root' ref={this.setRef}>
- {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} />}
- </BundleContainer>
- </div>
- </div>
- ))}
+ <div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
+ <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
+ <div role='presentation' className='modal-root__overlay' onClick={onClose} />
+ <div role='dialog' className='modal-root__container'>
+ {
+ visible ?
+ (<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
+ {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
+ </BundleContainer>) :
+ null
+ }
</div>
- }
- </TransitionMotion>
+ </div>
+ </div>
);
}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
@@ -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 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
- z-index: 9999;
- opacity: 0;
background: rgba($base-overlay-background, 0.7);
transform: translateZ(0);
}
@@ -3007,7 +3011,6 @@ button.icon-button.active i.fa-retweet {
justify-content: center;
align-content: space-around;
z-index: 9999;
- opacity: 0;
pointer-events: none;
user-select: none;
}
