@atlaskit/motion - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

CHANGELOG.md

 # @atlaskit/motion
 
+## 0.2.6
+
+### Patch Changes
+
+- [`1e4930567c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e4930567c) - There should be no noticeable changes to consumers of `motion`, but we now remove the animation styles once an animation is complete, or if the elements are not meant to animate on initial mount. This prevents a class of bugs where we were seeing unintended animations.
+
 ## 0.2.5
@@ -4,0 +10,0 @@

dist/cjs/entering/keyframes-motion.js

@@ -28,7 +28,16 @@ "use strict";
     var state = isExiting ? 'exiting' : 'entering';
-    var actualDuration = appear === false ? 0 : duration;
+    var _d = tslib_1.__read(react_1.useState(appear), 2), hasAnimationStyles = _d[0], setHasAnimationStyles = _d[1];
     react_1.useEffect(function () {
+        // Tracking this to prevent changing state on an unmounted component
+        var isCancelled = false;
         if (paused) {
             return;
         }
+        // On initial mount if elements aren't set to animate on appear, we return early and callback
+        if (!appear) {
+            onFinishMotion && onFinishMotion(state);
+            return;
+        }
+        // Elements may need animation styles back after initial mount (they could animate out)
+        setHasAnimationStyles(true);
         setTimeout(function () {
@@ -38,6 +47,10 @@ if (state === 'exiting') {
             }
+            if (!isCancelled) {
+                setHasAnimationStyles(false);
+            }
             onFinishMotion && onFinishMotion(state);
-        }, isExiting
-            ? actualDuration * EXITING_MOTION_MULTIPLIER
-            : actualDuration + delay);
+        }, isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration + delay);
+        return function () {
+            isCancelled = true;
+        };
         // We ignore this for onFinishMotion as consumers could potentially inline the function
@@ -47,11 +60,3 @@ // which would then trigger this effect every re-render.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onExitFinished,
-        state,
-        isExiting,
-        actualDuration,
-        delay,
-        paused,
-        setTimeout,
-    ]);
+    }, [onExitFinished, state, isExiting, duration, delay, paused, setTimeout]);
     return (react_1.default.createElement(core_1.ClassNames, null, function (_a) {
@@ -61,7 +66,7 @@ var css = _a.css;
             ref: staggered.ref,
-            className: css(tslib_1.__assign({ animationName: "" + core_1.keyframes(isExiting
-                    ? exitingAnimation || enteringAnimation
-                    : enteringAnimation), animationTimingFunction: animationTimingFunction(state), animationDelay: delay + "ms", animationFillMode: isExiting ? 'forwards' : 'backwards', animationDuration: (isExiting
-                    ? actualDuration * EXITING_MOTION_MULTIPLIER
-                    : actualDuration) + "ms", animationPlayState: paused ? 'paused' : 'running' }, accessibility_1.prefersReducedMotion())),
+            className: hasAnimationStyles
+                ? css(tslib_1.__assign({ animationName: "" + core_1.keyframes(isExiting
+                        ? exitingAnimation || enteringAnimation
+                        : enteringAnimation), animationTimingFunction: animationTimingFunction(state), animationDelay: delay + "ms", animationFillMode: isExiting ? 'forwards' : 'backwards', animationDuration: (isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration) + "ms", animationPlayState: paused ? 'paused' : 'running' }, accessibility_1.prefersReducedMotion()))
+                : '',
         }, state);
@@ -68,0 +73,0 @@ }));

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"sideEffects": false
 }

dist/es2019/entering/keyframes-motion.js

@@ -1,2 +0,2 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ClassNames, keyframes } from '@emotion/core';
@@ -24,7 +24,16 @@ import { prefersReducedMotion } from '../utils/accessibility';
     const state = isExiting ? 'exiting' : 'entering';
-    const actualDuration = appear === false ? 0 : duration;
+    const [hasAnimationStyles, setHasAnimationStyles] = useState(appear);
     useEffect(() => {
+        // Tracking this to prevent changing state on an unmounted component
+        let isCancelled = false;
         if (paused) {
             return;
         }
+        // On initial mount if elements aren't set to animate on appear, we return early and callback
+        if (!appear) {
+            onFinishMotion && onFinishMotion(state);
+            return;
+        }
+        // Elements may need animation styles back after initial mount (they could animate out)
+        setHasAnimationStyles(true);
         setTimeout(() => {
@@ -34,6 +43,10 @@ if (state === 'exiting') {
             }
+            if (!isCancelled) {
+                setHasAnimationStyles(false);
+            }
             onFinishMotion && onFinishMotion(state);
-        }, isExiting
-            ? actualDuration * EXITING_MOTION_MULTIPLIER
-            : actualDuration + delay);
+        }, isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration + delay);
+        return () => {
+            isCancelled = true;
+        };
         // We ignore this for onFinishMotion as consumers could potentially inline the function
@@ -43,26 +56,18 @@ // which would then trigger this effect every re-render.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onExitFinished,
-        state,
-        isExiting,
-        actualDuration,
-        delay,
-        paused,
-        setTimeout,
-    ]);
+    }, [onExitFinished, state, isExiting, duration, delay, paused, setTimeout]);
     return (React.createElement(ClassNames, null, ({ css }) => children({
         ref: staggered.ref,
-        className: css({
-            animationName: `${keyframes(isExiting
-                ? exitingAnimation || enteringAnimation
-                : enteringAnimation)}`,
-            animationTimingFunction: animationTimingFunction(state),
-            animationDelay: `${delay}ms`,
-            animationFillMode: isExiting ? 'forwards' : 'backwards',
-            animationDuration: `${isExiting
-                ? actualDuration * EXITING_MOTION_MULTIPLIER
-                : actualDuration}ms`,
-            animationPlayState: paused ? 'paused' : 'running',
-            ...prefersReducedMotion(),
-        }),
+        className: hasAnimationStyles
+            ? css({
+                animationName: `${keyframes(isExiting
+                    ? exitingAnimation || enteringAnimation
+                    : enteringAnimation)}`,
+                animationTimingFunction: animationTimingFunction(state),
+                animationDelay: `${delay}ms`,
+                animationFillMode: isExiting ? 'forwards' : 'backwards',
+                animationDuration: `${isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration}ms`,
+                animationPlayState: paused ? 'paused' : 'running',
+                ...prefersReducedMotion(),
+            })
+            : '',
     }, state)));
@@ -69,0 +74,0 @@ };

dist/es2019/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"sideEffects": false
 }

dist/esm/entering/keyframes-motion.js

@@ -1,3 +0,3 @@
-import { __assign } from "tslib";
-import React, { useEffect } from 'react';
+import { __assign, __read } from "tslib";
+import React, { useEffect, useState } from 'react';
 import { ClassNames, keyframes } from '@emotion/core';
@@ -26,7 +26,16 @@ import { prefersReducedMotion } from '../utils/accessibility';
     var state = isExiting ? 'exiting' : 'entering';
-    var actualDuration = appear === false ? 0 : duration;
+    var _d = __read(useState(appear), 2), hasAnimationStyles = _d[0], setHasAnimationStyles = _d[1];
     useEffect(function () {
+        // Tracking this to prevent changing state on an unmounted component
+        var isCancelled = false;
         if (paused) {
             return;
         }
+        // On initial mount if elements aren't set to animate on appear, we return early and callback
+        if (!appear) {
+            onFinishMotion && onFinishMotion(state);
+            return;
+        }
+        // Elements may need animation styles back after initial mount (they could animate out)
+        setHasAnimationStyles(true);
         setTimeout(function () {
@@ -36,6 +45,10 @@ if (state === 'exiting') {
             }
+            if (!isCancelled) {
+                setHasAnimationStyles(false);
+            }
             onFinishMotion && onFinishMotion(state);
-        }, isExiting
-            ? actualDuration * EXITING_MOTION_MULTIPLIER
-            : actualDuration + delay);
+        }, isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration + delay);
+        return function () {
+            isCancelled = true;
+        };
         // We ignore this for onFinishMotion as consumers could potentially inline the function
@@ -45,11 +58,3 @@ // which would then trigger this effect every re-render.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onExitFinished,
-        state,
-        isExiting,
-        actualDuration,
-        delay,
-        paused,
-        setTimeout,
-    ]);
+    }, [onExitFinished, state, isExiting, duration, delay, paused, setTimeout]);
     return (React.createElement(ClassNames, null, function (_a) {
@@ -59,7 +64,7 @@ var css = _a.css;
             ref: staggered.ref,
-            className: css(__assign({ animationName: "" + keyframes(isExiting
-                    ? exitingAnimation || enteringAnimation
-                    : enteringAnimation), animationTimingFunction: animationTimingFunction(state), animationDelay: delay + "ms", animationFillMode: isExiting ? 'forwards' : 'backwards', animationDuration: (isExiting
-                    ? actualDuration * EXITING_MOTION_MULTIPLIER
-                    : actualDuration) + "ms", animationPlayState: paused ? 'paused' : 'running' }, prefersReducedMotion())),
+            className: hasAnimationStyles
+                ? css(__assign({ animationName: "" + keyframes(isExiting
+                        ? exitingAnimation || enteringAnimation
+                        : enteringAnimation), animationTimingFunction: animationTimingFunction(state), animationDelay: delay + "ms", animationFillMode: isExiting ? 'forwards' : 'backwards', animationDuration: (isExiting ? duration * EXITING_MOTION_MULTIPLIER : duration) + "ms", animationPlayState: paused ? 'paused' : 'running' }, prefersReducedMotion()))
+                : '',
         }, state);
@@ -66,0 +71,0 @@ }));

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Atlassian motion variables, components and more.",
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

219578

increased by1.44%

Lines of code

3199

increased by0.53%

No dependency changes