From 8d60d85570e57ad12bc802c4c1f88a0f8a0dc260 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 8 Apr 2021 09:27:41 +0100 Subject: [PATCH 1/5] replace velocity-animate with CSS transitions --- package.json | 1 - res/css/views/rooms/_EventTile.scss | 4 + src/Velociraptor.js | 79 +++++++++++-------- src/VelocityBounce.js | 17 ---- .../views/rooms/ReadReceiptMarker.js | 38 +-------- yarn.lock | 5 -- 6 files changed, 50 insertions(+), 94 deletions(-) delete mode 100644 src/VelocityBounce.js diff --git a/package.json b/package.json index 6a8645adf3..2f1a96eadd 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,6 @@ "tar-js": "^0.3.0", "text-encoding-utf-8": "^1.0.2", "url": "^0.11.0", - "velocity-animate": "^2.0.6", "what-input": "^5.2.10", "zxcvbn": "^4.4.2" }, diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 028d9a7556..a82c894ac5 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -282,6 +282,10 @@ $left-gutter: 64px; display: inline-block; height: $font-14px; width: $font-14px; + + transition: + left .1s ease-out, + top .3s ease-out; } .mx_EventTile_readAvatarRemainder { diff --git a/src/Velociraptor.js b/src/Velociraptor.js index 2da54babe5..4fd9a23c82 100644 --- a/src/Velociraptor.js +++ b/src/Velociraptor.js @@ -1,6 +1,5 @@ import React from "react"; import ReactDom from "react-dom"; -import Velocity from "velocity-animate"; import PropTypes from 'prop-types'; /** @@ -20,14 +19,10 @@ export default class Velociraptor extends React.Component { // a list of state objects to apply to each child node in turn startStyles: PropTypes.array, - - // a list of transition options from the corresponding startStyle - enterTransitionOpts: PropTypes.array, }; static defaultProps = { startStyles: [], - enterTransitionOpts: [], }; constructor(props) { @@ -41,6 +36,25 @@ export default class Velociraptor extends React.Component { this._updateChildren(this.props.children); } + /** + * + * @param {HTMLElement} node element to apply styles to + * @param {object} styles a key/value pair of CSS properties + * @returns {Promise} promise resolving when the applied styles have finished transitioning + */ + _applyStyles(node, styles) { + Object.entries(styles).forEach(([property, value]) => { + node.style[property] = value; + }); + const transitionEndPromise = new Promise(resolve => { + node.addEventListener("transitionend", () => { + resolve(); + }, { once: true }); + }); + + return Promise.race([timeout(300), transitionEndPromise]); + } + _updateChildren(newChildren) { const oldChildren = this.children || {}; this.children = {}; @@ -50,14 +64,16 @@ export default class Velociraptor extends React.Component { const oldNode = ReactDom.findDOMNode(this.nodes[old.key]); if (oldNode && oldNode.style.left !== c.props.style.left) { - Velocity(oldNode, { left: c.props.style.left }, this.props.transition).then(() => { - // special case visibility because it's nonsensical to animate an invisible element - // so we always hidden->visible pre-transition and visible->hidden after - if (oldNode.style.visibility === 'visible' && c.props.style.visibility === 'hidden') { - oldNode.style.visibility = c.props.style.visibility; - } - }); - //console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); + this._applyStyles(oldNode, { left: c.props.style.left }) + .then(() => { + // special case visibility because it's nonsensical to animate an invisible element + // so we always hidden->visible pre-transition and visible->hidden after + if (oldNode.style.visibility === 'visible' && c.props.style.visibility === 'hidden') { + oldNode.style.visibility = c.props.style.visibility; + } + }); + + console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); } if (oldNode && oldNode.style.visibility === 'hidden' && c.props.style.visibility === 'visible') { oldNode.style.visibility = c.props.style.visibility; @@ -94,33 +110,22 @@ export default class Velociraptor extends React.Component { this.props.startStyles.length > 0 ) { const startStyles = this.props.startStyles; - const transitionOpts = this.props.enterTransitionOpts; const domNode = ReactDom.findDOMNode(node); // start from startStyle 1: 0 is the one we gave it // to start with, so now we animate 1 etc. - for (var i = 1; i < startStyles.length; ++i) { - Velocity(domNode, startStyles[i], transitionOpts[i-1]); - /* - console.log("start:", - JSON.stringify(transitionOpts[i-1]), - "->", - JSON.stringify(startStyles[i]), - ); - */ + for (let i = 1; i < startStyles.length; ++i) { + this._applyStyles(domNode, startStyles[i]); + // console.log("start:" + // JSON.stringify(startStyles[i]), + // ); } // and then we animate to the resting state - Velocity(domNode, restingStyle, - transitionOpts[i-1]) - .then(() => { - // once we've reached the resting state, hide the element if - // appropriate - domNode.style.visibility = restingStyle.visibility; - }); + setTimeout(() => { + this._applyStyles(domNode, restingStyle); + }, 0); // console.log("enter:", - // JSON.stringify(transitionOpts[i-1]), - // "->", // JSON.stringify(restingStyle)); } this.nodes[k] = node; @@ -128,9 +133,13 @@ export default class Velociraptor extends React.Component { render() { return ( - - { Object.values(this.children) } - + <>{ Object.values(this.children) } ); } } + +function timeout(time) { + return new Promise(resolve => + setTimeout(() => resolve(), time), + ); +} diff --git a/src/VelocityBounce.js b/src/VelocityBounce.js deleted file mode 100644 index ffbf7de829..0000000000 --- a/src/VelocityBounce.js +++ /dev/null @@ -1,17 +0,0 @@ -import Velocity from "velocity-animate"; - -// courtesy of https://github.com/julianshapiro/velocity/issues/283 -// We only use easeOutBounce (easeInBounce is just sort of nonsensical) -function bounce( p ) { - let pow2; - let bounce = 4; - - while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) { - // just sets pow2 - } - return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 ); -} - -Velocity.Easings.easeOutBounce = function(p) { - return 1 - bounce(1 - p); -}; diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 7473aac7cd..cf5abeec63 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -17,7 +17,6 @@ limitations under the License. import React, {createRef} from 'react'; import PropTypes from 'prop-types'; -import '../../../VelocityBounce'; import { _t } from '../../../languageHandler'; import {formatDate} from '../../../DateUtils'; import Velociraptor from "../../../Velociraptor"; @@ -25,14 +24,6 @@ import * as sdk from "../../../index"; import {toPx} from "../../../utils/units"; import {replaceableComponent} from "../../../utils/replaceableComponent"; -let bounce = false; -try { - if (global.localStorage) { - bounce = global.localStorage.getItem('avatar_bounce') == 'true'; - } -} catch (e) { -} - @replaceableComponent("views.rooms.ReadReceiptMarker") export default class ReadReceiptMarker extends React.PureComponent { static propTypes = { @@ -139,42 +130,18 @@ export default class ReadReceiptMarker extends React.PureComponent { } const startStyles = []; - const enterTransitionOpts = []; if (oldInfo && oldInfo.left) { // start at the old height and in the old h pos - startStyles.push({ top: startTopOffset+"px", left: toPx(oldInfo.left) }); - - const reorderTransitionOpts = { - duration: 100, - easing: 'easeOut', - }; - - enterTransitionOpts.push(reorderTransitionOpts); } - // then shift to the rightmost column, - // and then it will drop down to its resting position - // - // XXX: We use a small left value to trick velocity-animate into actually animating. - // This is a very annoying bug where if it thinks there's no change to `left` then it'll - // skip applying it, thus making our read receipt at +14px instead of +0px like it - // should be. This does cause a tiny amount of drift for read receipts, however with a - // value so small it's not perceived by a user. - // Note: Any smaller values (or trying to interchange units) might cause read receipts to - // fail to fall down or cause gaps. - startStyles.push({ top: startTopOffset+'px', left: '1px' }); - enterTransitionOpts.push({ - duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300, - easing: bounce ? 'easeOutBounce' : 'easeOutCubic', - }); + startStyles.push({ top: startTopOffset+'px', left: '0' }); this.setState({ suppressDisplay: false, startStyles: startStyles, - enterTransitionOpts: enterTransitionOpts, }); } @@ -211,8 +178,7 @@ export default class ReadReceiptMarker extends React.PureComponent { return ( + startStyles={this.state.startStyles} > Date: Thu, 8 Apr 2021 10:36:38 +0100 Subject: [PATCH 2/5] Animate read receipts for all component updates --- src/components/views/rooms/ReadReceiptMarker.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index cf5abeec63..2820cea7db 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -106,7 +106,18 @@ export default class ReadReceiptMarker extends React.PureComponent { // we've already done our display - nothing more to do. return; } + this._animateMarker(); + } + componentDidUpdate(prevProps) { + const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset; + const visibilityChanged = prevProps.hidden !== this.props.hidden; + if (differentLeftOffset || visibilityChanged) { + this._animateMarker(); + } + } + + _animateMarker() { // treat new RRs as though they were off the top of the screen let oldTop = -15; From 1d75726a758a5a43073fdfea8b714051b34c930c Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 8 Apr 2021 11:05:45 +0100 Subject: [PATCH 3/5] Honour prefers reduced motion for read receipts --- res/css/_common.scss | 10 ++++++++++ res/css/views/rooms/_EventTile.scss | 4 ++-- src/Velociraptor.js | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 0093bde0ab..0b363edaee 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e :root { font-size: 10px; + + --transition-short: .1s; + --transition-standard: .3s; +} + +@media (prefers-reduced-motion) { + :root { + --transition-short: 0; + --transition-standard: 0; + } } html { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a82c894ac5..f455931f08 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -284,8 +284,8 @@ $left-gutter: 64px; width: $font-14px; transition: - left .1s ease-out, - top .3s ease-out; + left var(--transition-short) ease-out, + top var(--transition-standard) ease-out; } .mx_EventTile_readAvatarRemainder { diff --git a/src/Velociraptor.js b/src/Velociraptor.js index 4fd9a23c82..c453f56fdb 100644 --- a/src/Velociraptor.js +++ b/src/Velociraptor.js @@ -73,7 +73,7 @@ export default class Velociraptor extends React.Component { } }); - console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); + // console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); } if (oldNode && oldNode.style.visibility === 'hidden' && c.props.style.visibility === 'visible') { oldNode.style.visibility = c.props.style.visibility; From bf34e37dcc8ad36c521020e821391520f49176b4 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 8 Apr 2021 11:43:13 +0100 Subject: [PATCH 4/5] fix hiding read receipts animation --- src/Velociraptor.js | 28 ++----------------- .../views/rooms/ReadReceiptMarker.js | 1 - 2 files changed, 2 insertions(+), 27 deletions(-) diff --git a/src/Velociraptor.js b/src/Velociraptor.js index c453f56fdb..1592f4be06 100644 --- a/src/Velociraptor.js +++ b/src/Velociraptor.js @@ -40,19 +40,12 @@ export default class Velociraptor extends React.Component { * * @param {HTMLElement} node element to apply styles to * @param {object} styles a key/value pair of CSS properties - * @returns {Promise} promise resolving when the applied styles have finished transitioning + * @returns {void} */ _applyStyles(node, styles) { Object.entries(styles).forEach(([property, value]) => { node.style[property] = value; }); - const transitionEndPromise = new Promise(resolve => { - node.addEventListener("transitionend", () => { - resolve(); - }, { once: true }); - }); - - return Promise.race([timeout(300), transitionEndPromise]); } _updateChildren(newChildren) { @@ -64,20 +57,9 @@ export default class Velociraptor extends React.Component { const oldNode = ReactDom.findDOMNode(this.nodes[old.key]); if (oldNode && oldNode.style.left !== c.props.style.left) { - this._applyStyles(oldNode, { left: c.props.style.left }) - .then(() => { - // special case visibility because it's nonsensical to animate an invisible element - // so we always hidden->visible pre-transition and visible->hidden after - if (oldNode.style.visibility === 'visible' && c.props.style.visibility === 'hidden') { - oldNode.style.visibility = c.props.style.visibility; - } - }); - + this._applyStyles(oldNode, { left: c.props.style.left }); // console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left); } - if (oldNode && oldNode.style.visibility === 'hidden' && c.props.style.visibility === 'visible') { - oldNode.style.visibility = c.props.style.visibility; - } // clone the old element with the props (and children) of the new element // so prop updates are still received by the children. this.children[c.key] = React.cloneElement(old, c.props, c.props.children); @@ -137,9 +119,3 @@ export default class Velociraptor extends React.Component { ); } } - -function timeout(time) { - return new Promise(resolve => - setTimeout(() => resolve(), time), - ); -} diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 2820cea7db..e2b95a7ada 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -165,7 +165,6 @@ export default class ReadReceiptMarker extends React.PureComponent { const style = { left: toPx(this.props.leftOffset), top: '0px', - visibility: this.props.hidden ? 'hidden' : 'visible', }; let title; From 67faaeaefffc24cef1d3ad5424193b005d7b232f Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 14 Apr 2021 10:18:45 +0100 Subject: [PATCH 5/5] Rename Velociraptor to NodeAnimator after velocity deprecation --- .eslintignore.errorfiles | 2 +- src/{Velociraptor.js => NodeAnimator.js} | 4 ++-- src/components/views/rooms/ReadReceiptMarker.js | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) rename src/{Velociraptor.js => NodeAnimator.js} (96%) diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles index 1c0a3d1254..d9177bebb5 100644 --- a/.eslintignore.errorfiles +++ b/.eslintignore.errorfiles @@ -1,7 +1,7 @@ # autogenerated file: run scripts/generate-eslint-error-ignore-file to update. src/Markdown.js -src/Velociraptor.js +src/NodeAnimator.js src/components/structures/RoomDirectory.js src/components/views/rooms/MemberList.js src/ratelimitedfunc.js diff --git a/src/Velociraptor.js b/src/NodeAnimator.js similarity index 96% rename from src/Velociraptor.js rename to src/NodeAnimator.js index 1592f4be06..8456e6e9fd 100644 --- a/src/Velociraptor.js +++ b/src/NodeAnimator.js @@ -3,13 +3,13 @@ import ReactDom from "react-dom"; import PropTypes from 'prop-types'; /** - * The Velociraptor contains components and animates transitions with velocity. + * The NodeAnimator contains components and animates transitions. * It will only pick up direct changes to properties ('left', currently), and so * will not work for animating positional changes where the position is implicit * from DOM order. This makes it a lot simpler and lighter: if you need fully * automatic positional animation, look at react-shuffle or similar libraries. */ -export default class Velociraptor extends React.Component { +export default class NodeAnimator extends React.Component { static propTypes = { // either a list of child nodes, or a single child. children: PropTypes.any, diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index e2b95a7ada..709e6a0db0 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -19,7 +19,7 @@ import React, {createRef} from 'react'; import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import {formatDate} from '../../../DateUtils'; -import Velociraptor from "../../../Velociraptor"; +import NodeAnimator from "../../../NodeAnimator"; import * as sdk from "../../../index"; import {toPx} from "../../../utils/units"; import {replaceableComponent} from "../../../utils/replaceableComponent"; @@ -187,7 +187,7 @@ export default class ReadReceiptMarker extends React.PureComponent { } return ( - - + ); } }