From 6e0659c838bacfea54bbab5a4dd3501fbdf8b668 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Thu, 28 Sep 2017 11:43:18 -0700 Subject: [PATCH] Improve performance of modal and swipe animations (#5135) * Improve performance of modal and swipe animations * Fix eslint issues --- .../features/ui/components/media_modal.js | 7 +- .../features/ui/components/modal_root.js | 65 +++++++++---------- app/javascript/styles/components.scss | 9 ++- 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 index da2ceecb1f..705645b403 100644 --- 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 (
{leftNav}
- - + {content}
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index a09c9d9b37..f420f0abf4 100644 --- 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 ? : 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 ( +
+ ); } return ( - - {interpolatedStyles => -
- {interpolatedStyles.map(({ key, data: { type, props }, style }) => ( -
-
-
- - {(SpecificComponent) => } - -
-
- ))} +
+
+
+
+ { + visible ? + ( + {(SpecificComponent) => } + ) : + null + }
- } - +
+
); } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 631cd7a134..5ea0d134ef 100644 --- 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; }