fix hiding read receipts animation

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<void>} 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),
-    );
-}

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;