feat(docs): add example change animation (#531)

akveo · Jun 27, 2018 · e7bb266 · e7bb266
1 parent d474598
commit e7bb266
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 import { BrowserModule, Title } from '@angular/platform-browser';
-import { InjectionToken, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';

diff --git a/docs/app/blocks/components/stacked-example-block/stacked-examples.component.ts b/docs/app/blocks/components/stacked-example-block/stacked-examples.component.ts
@@ -2,24 +2,49 @@ import { Component, Input } from '@angular/core';
 
 import { NgdExampleView } from '../../enum.example-view';
 import { NgdAnalytics } from '../../../@theme/services';
+import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
+
+export const pulse = animation(
+  animate(
+    '{{ timing }}s {{ delay }}s',
+    keyframes([
+      style({ transform: 'scale3d(1, 1, 1)' }),
+      style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
+      style({ transform: 'scale3d(1, 1, 1)' }),
+    ]),
+  ),
+  { params: { scale: 1.02, timing: 0.5, delay: 0 } },
+);
 
 @Component({
   selector: 'ngd-stacked-example-block',
   template: `
     <div>
       <ngd-live-example-block [hidden]="!isLive"
+                              [@exampleState]="isLive ? 'live': 'code'"
                               [content]="content"
                               hasViewSwitch="true"
                               (changeView)="changeView($event)">
       </ngd-live-example-block>
 
       <ngd-tabbed-example-block [hidden]="isLive"
+                                [@exampleState]="isLive ? 'live': 'code'"
                                 [content]="content"
                                 hasViewSwitch="true"
                                 (changeView)="changeView($event)">
       </ngd-tabbed-example-block>
     </div>
   `,
+  animations: [
+    trigger('exampleState', [
+      transition('live => code', [
+        useAnimation(pulse),
+      ]),
+      transition('code => live', [
+        useAnimation(pulse),
+      ]),
+    ]),
+  ],
 })
 export class NgdStackedExampleComponent {