feat(skeleton): bg animation

core-ds · Jun 4, 2021 · 37a52ad · 37a52ad
1 parent 2b12e34
commit 37a52ad
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 8 deletions.
diff --git a/packages/skeleton/src/Component.stories.mdx b/packages/skeleton/src/Component.stories.mdx
@@ -1,4 +1,4 @@
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { Container, Row, Col } from 'storybook/blocks/grid';
 import { ComponentHeader } from 'storybook/blocks/component-header';
@@ -26,6 +26,7 @@ import styles from './stories.module.css';
                 className={ text('className', '') }
                 dataTestId={ text('dataTestId', '') }
                 animate={ boolean('animate', true) }
+                animation={ select('animation', ['gradient', 'bg'], 'gradient') }
             >
                 <img
                     width={ 150 }

diff --git a/packages/skeleton/src/Component.tsx b/packages/skeleton/src/Component.tsx
@@ -12,6 +12,10 @@ export type SkeletonProps = {
      * Флаг явного включения анимации скелета
      */
     animate?: boolean;
+    /**
+     * Вариант анимации
+     */
+    animation?: 'gradient' | 'bg';
     /**
      * Дополнительный класс
      */
@@ -25,14 +29,20 @@ export type SkeletonProps = {
 export const Skeleton: React.FC<SkeletonProps> = ({
     visible,
     animate = true,
+    animation = 'gradient',
     className,
     dataTestId,
     children,
 }) => {
     if (visible) {
         return (
             <div
-                className={cn(styles.component, { [styles.animate]: animate }, className)}
+                className={cn(
+                    styles.component,
+                    { [styles.animate]: animate },
+                    animation === 'bg' && styles.animateBg,
+                    className,
+                )}
                 data-test-id={dataTestId}
             >
                 {children}

diff --git a/packages/skeleton/src/index.module.css b/packages/skeleton/src/index.module.css
@@ -1,9 +1,9 @@
 @import '../../vars/src/colors-indigo.css';
 
 :root {
-    --skeleton-background-filter: none;
     --skeleton-default-color: var(--color-light-specialbg-component);
     --skeleton-border-radius: var(--border-radius-m);
+    --skeleton-backdrop-filter: none;
 }
 
 .component {
@@ -13,6 +13,7 @@
     color: transparent;
     border-radius: var(--skeleton-border-radius);
     overflow: hidden;
+    backdrop-filter: var(--skeleton-backdrop-filter);
 
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
@@ -30,7 +31,6 @@
     right: 0;
     bottom: 0;
     background: var(--skeleton-default-color);
-    backdrop-filter: var(--skeleton-background-filter);
 }
 
 .animate:after {
@@ -41,7 +41,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: animation;
+    animation-name: gradient;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -55,7 +55,7 @@
     );
 }
 
-@keyframes animation {
+@keyframes gradient {
     0% {
         transform: translateX(-80%);
     }
@@ -66,3 +66,34 @@
         transform: translateX(0);
     }
 }
+
+/* experimental bg animation */
+
+.animate.animateBg:before {
+    animation-name: background;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-timing-function: ease-in-out;
+    animation-play-state: running;
+    opacity: 0.5;
+}
+
+@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
+    .animate.animateBg:before {
+        opacity: 0.4;
+    }
+}
+
+.animateBg:after {
+    display: none;
+}
+
+@keyframes background {
+    0% {
+        background: rgb(182, 188, 195);
+    }
+    100% {
+        background: rgb(198, 205, 214);
+    }
+}
diff --git a/packages/themes/src/mixins/skeleton/click.css b/packages/themes/src/mixins/skeleton/click.css
@@ -3,8 +3,10 @@
 @define-mixin skeleton-click {
     /* core vars */
     --color-light-graphic-neutral: #dbdee1;
+    --border-radius-m: 4px;
 
     /* theme */
-    --skeleton-default-color: var(--color-light-graphic-neutral);
-    --skeleton-border-radius: 4px;
+    --skeleton-default-color: rgba(182, 188, 195, 0.4);
+    --skeleton-border-radius: var(--border-radius-s);
+    --skeleton-backdrop-filter: blur(20px);
 }