feat: added animation-direction utilities

ingram-projects · Feb 10, 2021 · 9597ffb · 9597ffb
1 parent 97988ad
commit 9597ffb
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/packages/core/src/_functions.scss b/packages/core/src/_functions.scss
@@ -31,10 +31,20 @@
 
 // VARIABLES
 
+@function xyz-default-var($name, $mode: 'all') {
+  // Make sure return variable cascades by mode
+  @if $mode == 'all' {
+    @return var(--xyz-#{$name}-default);
+  } @else {
+    @return var(--xyz-#{xyz-name($name, $mode)}-default, var(--xyz-#{$name}-default));
+  }
+}
+
+
 @function xyz-var($name, $mode: 'all', $fallback: 'default') {
   // If fallback is default remap it to default variable
   @if $fallback == 'default' {
-    $fallback: var(--xyz-#{$name}-default);
+    $fallback: xyz-default-var($name, $mode);
   }
 
   // Make sure return variable cascades by mode
@@ -170,36 +180,35 @@
 // ANIMATIONS
 
 @mixin xyz-animation($mode) {
-  $keyframes: xyz-var('keyframes', $mode, none);
+  $keyframes: xyz-var('keyframes', $mode);
   $ease: xyz-var('ease', $mode);
   $duration: xyz-var('duration', $mode);
   $delay: xyz-var('delay', $mode);
   $stagger: xyz-var('stagger', $mode, 0s);
   $stagger-rev: xyz-var('stagger-rev', $mode, 0s);
   $iterate: xyz-var('iterate', $mode);
+  $direction: xyz-var('direction', $mode);
   $origin: xyz-var('origin', $mode);
 
-  $direction: normal;
-  @if $mode == 'out' {
-    $direction: reverse;
-  }
-
   $index: var(--xyz-index, 0);
   $index-rev: var(--xyz-index-rev, 0);
 
-  // TODO: remove these when postcss-calc bug is fixed: https://github.com/postcss/postcss-calc/issues/77
-  --xyz-active-duration: #{$duration};
-  --xyz-active-delay: #{$delay};
+  // TODO: remove these -calc variables when postcss-calc bug is fixed: https://github.com/postcss/postcss-calc/issues/77
+  --xyz-stagger-delay-calc: var(--xyz-nested-stagger-delay, 0s) + #{$stagger} * #{$index} + #{$stagger-rev} * #{$index-rev};
+  --xyz-total-delay-calc: var(--xyz-stagger-delay, 0s) + #{$delay};
 
-  --xyz-stagger-delay: calc(var(--xyz-nested-stagger-delay, 0s) + #{$stagger} * #{$index} + #{$stagger-rev} * #{$index-rev});
-  --xyz-total-delay: calc(var(--xyz-stagger-delay, 0s) + var(--xyz-active-delay));
+  --xyz-stagger-delay: calc(var(--xyz-stagger-delay-calc));
+  --xyz-total-delay: calc(var(--xyz-total-delay-calc));
   transform-origin: #{$origin};
   backface-visibility: visible;
 
+  // TODO: remove these -calc variables when postcss-calc bug is fixed: https://github.com/postcss/postcss-calc/issues/77
+  --xyz-delay-calc: var(--xyz-total-delay, 0s) + var(--xyz-start-offset, 0) * (var(--xyz-total-delay, 0s) + #{$duration}) * -1;
+
   animation:
-    var(--xyz-active-duration)
+    #{$duration}
     #{$ease}
-    calc(var(--xyz-total-delay, 0s) + var(--xyz-start-offset, 0) * (var(--xyz-total-delay, 0s) + var(--xyz-active-duration)) * -1)
+    calc(var(--xyz-delay-calc))
     #{$iterate}
     #{$direction}
     both;

diff --git a/packages/core/src/_variables.scss b/packages/core/src/_variables.scss
@@ -94,16 +94,23 @@ $xyz-iterate-levels: (
   'infinite': infinite,
 ) !default;
 
+$xyz-direction-levels: (
+  'normal': normal,
+  'reverse': reverse,
+  'alternate': alternate,
+  'alternate-reverse': alternate-reverse,
+) !default;
+
 $xyz-origin-levels: (
- 'center': center,
- 'top': top,
- 'bottom': bottom,
- 'left': left,
- 'right': right,
- 'top-left': top left,
- 'top-right': top right,
- 'bottom-left': bottom left,
- 'bottom-right': bottom right,
+  'center': center,
+  'top': top,
+  'bottom': bottom,
+  'left': left,
+  'right': right,
+  'top-left': top left,
+  'top-right': top right,
+  'bottom-left': bottom left,
+  'bottom-right': bottom right,
 ) !default;
 
 $xyz-opacity-levels: (
@@ -205,6 +212,9 @@ $xyz-variables-map: (
   'iterate': (
     'type': 'iterate',
   ),
+  'direction': (
+    'type': 'direction',
+  ),
   'origin': (
     'type': 'origin',
   ),
@@ -267,11 +277,14 @@ $xyz-variables-map: (
 // DEFAULTS
 
 $xyz-defaults-map: (
+  'keyframes': none,
   'ease': map.get($xyz-ease-levels, 'ease'),
   'duration': map.get($xyz-duration-levels, '5'),
   'delay': map.get($xyz-delay-levels, '0'),
   'stagger': map.get($xyz-stagger-levels, '2.5'),
   'iterate': map.get($xyz-iterate-levels, '1'),
+  'direction': map.get($xyz-direction-levels, 'normal'),
+  'out-direction': map.get($xyz-direction-levels, 'reverse'),
   'origin': map.get($xyz-origin-levels, 'center'),
   'opacity': map.get($xyz-opacity-levels, '100%'),
   'perspective': map.get($xyz-perspective-levels, '0'),
@@ -322,6 +335,12 @@ $xyz-utilities-map: (
     'default': var(--xyz-iterate-default),
     'levels': $xyz-iterate-levels,
   ),
+  'direction': (
+    'type': 'direction',
+    'vars': ['direction'],
+    'default': var(--xyz-direction-default),
+    'levels': $xyz-direction-levels,
+  ),
   'origin': (
     'type': 'origin',
     'vars': ['origin'],