From 8d60d85570e57ad12bc802c4c1f88a0f8a0dc260 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 8 Apr 2021 09:27:41 +0100 Subject: [PATCH] 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} >