docs(animations): improve demo in dark mode by using filter and box shadow

Author: brandyscarney

docs/utilities/animations.md

@@ -255,7 +255,7 @@ import Group from '@site/static/usage/v7/animations/group/index.md';
 
 Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles.
 
-This example sets an inline opacity of `0.2` on the card prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared. The animation must be stopped in order to remove the background and play it with the opacity again.
+This example sets an inline filter which inverts the background color of the card by `75%` prior to the animation starting. Once the animation finishes, the box shadow on the element is set to `rgba(255, 0, 50, 0.4) 0px 4px 16px 6px`, a red glow, and the inline filter is cleared. The animation must be stopped in order to remove the box shadow and play it with the filter again.
 
 See [Methods](#methods) for a complete list of hooks.
 

static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md

@@ -21,13 +21,13 @@ export class ExampleComponent {
       .addElement(this.cardElements.get(0).nativeElement)
       .duration(2000)
       .beforeStyles({
-        opacity: 0.2,
+        filter: 'invert(75%)',
       })
-      .beforeClearStyles(['background'])
+      .beforeClearStyles(['box-shadow'])
       .afterStyles({
-        background: 'rgba(0, 255, 0, 0.5)',
+        'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
       })
-      .afterClearStyles(['opacity'])
+      .afterClearStyles(['filter'])
       .keyframes([
         { offset: 0, transform: 'scale(1)' },
         { offset: 0.5, transform: 'scale(1.5)' },

static/usage/v7/animations/before-and-after-hooks/demo.html

@@ -17,13 +17,13 @@
         .addElement(document.querySelector('#card'))
         .duration(2000)
         .beforeStyles({
-          opacity: 0.2,
+          filter: 'invert(75%)',
         })
-        .beforeClearStyles(['background'])
+        .beforeClearStyles(['box-shadow'])
         .afterStyles({
-          background: 'rgba(0, 255, 0, 0.5)',
+          'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
         })
-        .afterClearStyles(['opacity'])
+        .afterClearStyles(['filter'])
         .keyframes([
           { offset: 0, transform: 'scale(1)' },
           { offset: 0.5, transform: 'scale(1.5)' },

static/usage/v7/animations/before-and-after-hooks/javascript.md

@@ -12,13 +12,13 @@
     .addElement(document.querySelector('#card'))
     .duration(2000)
     .beforeStyles({
-      opacity: 0.2,
+      filter: 'invert(75%)',
     })
-    .beforeClearStyles(['background'])
+    .beforeClearStyles(['box-shadow'])
     .afterStyles({
-      background: 'rgba(0, 255, 0, 0.5)',
+      'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
     })
-    .afterClearStyles(['opacity'])
+    .afterClearStyles(['filter'])
     .keyframes([
       { offset: 0, transform: 'scale(1)' },
       { offset: 0.5, transform: 'scale(1.5)' },

static/usage/v7/animations/before-and-after-hooks/react.md

@@ -14,13 +14,13 @@ function Example() {
         .addElement(cardEl.current!)
         .duration(2000)
         .beforeStyles({
-          opacity: 0.2,
+          filter: 'invert(75%)',
         })
-        .beforeClearStyles(['background'])
+        .beforeClearStyles(['box-shadow'])
         .afterStyles({
-          background: 'rgba(0, 255, 0, 0.5)',
+          'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
         })
-        .afterClearStyles(['opacity'])
+        .afterClearStyles(['filter'])
         .keyframes([
           { offset: 0, transform: 'scale(1)' },
           { offset: 0.5, transform: 'scale(1.5)' },

static/usage/v7/animations/before-and-after-hooks/vue.md

@@ -31,13 +31,13 @@
           .addElement(cardEl.value.$el)
           .duration(2000)
           .beforeStyles({
-            opacity: 0.2,
+            filter: 'invert(75%)',
           })
-          .beforeClearStyles(['background'])
+          .beforeClearStyles(['box-shadow'])
           .afterStyles({
-            background: 'rgba(0, 255, 0, 0.5)',
+            'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
           })
-          .afterClearStyles(['opacity'])
+          .afterClearStyles(['filter'])
           .keyframes([
             { offset: 0, transform: 'scale(1)' },
             { offset: 0.5, transform: 'scale(1.5)' },