@atlaskit/motion - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

CHANGELOG.md

 # @atlaskit/motion
 
+## 0.1.1
+
+### Patch Changes
+
+- [patch][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+  New `<ExitingPersistence />` component
+
+  You can now persist exiting elements using `ExitingPersistence`.
+  Doing so will allow them to animate away while exiting.
+
+  There are three ways you can utilise this component:
+
+  **Conditionally rendering a single component**
+
+  ```
+  import { FadeIn, ExitingPersistence } from '@atlaskit/motion';
+
+  ({ entered }) => (
+    <div>
+      <ExitingPersistence>
+        {entered && (
+          <FadeIn>{props => <div {...props}>hello world</div>}</FadeIn>
+        )}
+      </ExitingPersistence>
+    </div>
+  );
+  ```
+
+  **Conditionally rendering multiple components**
+
+  ```
+  import { FadeIn, ExitingPersistence } from '@atlaskit/motion';
+
+  () => (
+    <ExitingPersistence>
+      {one && <FadeIn>{props => <div {...props}>hello world</div>}</FadeIn>}
+      {two && <FadeIn>{props => <div {...props}>hello world</div>}</FadeIn>}
+    </ExitingPersistence>
+  );
+  ```
+
+  **Conditionally rendering elements in an array**
+
+  Make sure to have unique keys for every element!
+
+  ```
+  import { FadeIn, ExitingPersistence } from '@atlaskit/motion';
+
+  () => (
+    <ExitingPersistence>
+      {elements.map(element => (
+        // Key is very important here!
+        <FadeIn key={element.key}>
+          {props => <div {...props}>hello world</div>}
+        </FadeIn>
+      ))}
+    </ExitingPersistence>
+  );
+  ```
+
+  Updated `<StaggeredEntrance />` component
+
+  `StaggeredEntrance` no longer has the limitation of requiring motions to be the direct descendant.
+  Simply ensure your motion elements are somewhere in the child tree and they will have their entrance motion staggered.
+
+  ```
+  import { FadeIn, StaggeredEntrance } from '@atlaskit/motion';
+
+  () => (
+    <StaggeredEntrance>
+      <div>
+        {items.map(logo => (
+          <div key={logo.key}>
+            <FadeIn>{props => <div {...props} />}</FadeIn>
+          </div>
+        ))}
+      </div>
+    </StaggeredEntrance>
+  );
+  ```
+
 ## 0.1.0
@@ -4,0 +86,0 @@

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"sideEffects": false
 }

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Atlassian motion variables, components and more.",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

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

113844

increased by1.83%

No dependency changes