feat: improve fade out animations

.storybook/animate.stories.js

@@ -9,7 +9,9 @@ const {addon: addonKeyframes} = require('../addon/keyframes');
 const animations = [
     'fadeIn',
     'fadeInDown',
-    'fadeInExpand',
+    'fadeInScale',
+    'fadeOut',
+    'fadeOutScale',
 ];
 
 const nano = create();

addon/animate/fadeInExpand.js → addon/animate/fadeInScale.js

@@ -6,7 +6,7 @@ exports.addon = function (renderer) {
     }
 
     renderer.put('', {
-        '@keyframes fadeInExpand': {
+        '@keyframes fadeInScale': {
             from: {
                 opacity: 0,
                 transform: 'scale(.95)'
@@ -18,8 +18,8 @@ exports.addon = function (renderer) {
             }
         },
 
-        '.fadeInExpand': {
-            animation: 'fadeInExpand .3s',
+        '.fadeInScale': {
+            animation: 'fadeInScale .3s',
         }
     });
 };

addon/animate/fadeOut.js

@@ -0,0 +1,23 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeOut': {
+            from: {
+                opacity: 1,
+            },
+            to: {
+                opacity: 0,
+            }
+        },
+
+        '.fadeOut': {
+            animation: 'fadeOut .3s linear',
+            'animation-fill-mode': 'forwards',
+        }
+    });
+};

addon/animate/fadeOutScale.js

@@ -0,0 +1,21 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeOutScale': {
+            to: {
+                opacity: 0,
+                transform: 'scale(.95)',
+            }
+        },
+
+        '.fadeOutScale': {
+            animation: 'fadeOutScale .3s linear',
+            'animation-fill-mode': 'forwards',
+        }
+    });
+};

docs/animations.md

@@ -6,7 +6,9 @@ name.
 
 - `animate/fadeIn`
 - `animate/fadeInDown`
-- `animate/fadeInExpand`
+- `animate/fadeInScale`
+- `animate/fadeOut`
+- `animate/fadeOutScale`
 
 Read more about the [Addons Installation](./Addons.md#addon-installation).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nano-css",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Smallest 5th gen CSS-in-JS library",
   "main": "index.js",
   "unpkg": "dist/nano-css.umd.min.js",