Added directional parameter to attention seekers.

- New interface IAttentionSeekerAnimationOptions
- Changed parameter type from IAnimationOptions to IAttentionSeekerAnimationOptions in attention seekers
Added some documentation
Issue #25

Author: dalepo

README.md

@@ -79,7 +79,9 @@ and use them in the template:
 
 ### Animations with state or triggered by state changes
 
-These animations take as an input a boolean value. Some animations, like Attention Seekers are triggered by any changes of the state, all `in` and `out` animations are triggered by changes of state from `false` to `true`. Animations that preserve state, like `collapse` or `rotate` display default state when the value is `false` and transition to end state when the value is `true`
+These animations take as an input a boolean value. Some animations, like Attention Seekers are triggered depending on the `direction` parameter; bidirectional (`<=>`) will be triggered by any state change, unidirectional (`=>`) will be triggered only when state changes from false to true.
+
+All `in` and `out` animations are triggered by changes of state from `false` to `true`. Animations that preserve state, like `collapse` or `rotate` display default state when the value is `false` and transition to end state when the value is `true`
 
 ```ts
 import { collapseAnimation, rubberBandAnimation } from 'angular-animations';
@@ -120,6 +122,21 @@ In a decorator:
 <div  *ngIf="CONDITION"  [@enter] [@leave]></div>
 ```
 
+Animations like Attention Seekers can take a direction parameter (cannot be in template)
+```ts
+@Component({
+  ...
+  animations: [
+    // triggers when STATE changes from false to true
+    rubberBandAnimation({anchor: 'rubber', direction: '=>', duration: 500})
+  ]
+})
+```
+
+```html
+<div [@rubber]="STATE"> </div>
+```
+
 In a template (providing option for dynamic changes):
 
 ```ts

lib/attention-seekers/bounce.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const bounce = animation([
   animate(
@@ -34,10 +34,10 @@ const bounce = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function bounceAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function bounceAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'bounce', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/flash.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const flash = animation([
   animate(
@@ -30,10 +30,10 @@ const flash = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function flashAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function flashAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'flash', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/jello.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const jello = animation([
   animate(
@@ -35,10 +35,10 @@ const jello = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function jelloAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function jelloAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'jello', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/pulse.animation.ts

@@ -13,9 +13,9 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
-export interface IPulseAnimationOptions extends IAnimationOptions {
+export interface IPulseAnimationOptions extends IAttentionSeekerAnimationOptions {
   /**
    * Scale factor
    *
@@ -40,7 +40,7 @@ const DEFAULT_DURATION = 1000;
 export function pulseAnimation(options?: IPulseAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'pulse', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/rubber-band.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const rubberBand = animation([
   animate(
@@ -32,10 +32,10 @@ const rubberBand = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function rubberBandAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function rubberBandAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'rubberBand', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/shake.animation.ts

@@ -13,9 +13,9 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
-export interface IShakeAnimationOptions extends IAnimationOptions {
+export interface IShakeAnimationOptions extends IAttentionSeekerAnimationOptions {
   /**
    * Shake size. Possible units: px, %, em, rem, vw, vh
    *
@@ -44,11 +44,10 @@ const shake = animation([
 ]);
 
 const DEFAULT_DURATION = 1000;
-
 export function shakeAnimation(options?: IShakeAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'shake', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/swing.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const swing = animation([
   animate(
@@ -31,10 +31,10 @@ const swing = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function swingAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function swingAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'swing', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/tada.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const tada = animation([
   animate(
@@ -36,10 +36,10 @@ const tada = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function tadaAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function tadaAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'tada', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/attention-seekers/wobble.animation.ts

@@ -13,7 +13,7 @@ import {
   useAnimation
 } from '@angular/animations';
 
-import { IAnimationOptions } from '../common/interfaces';
+import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
 
 const wobble = animation([
   animate(
@@ -32,10 +32,10 @@ const wobble = animation([
 
 const DEFAULT_DURATION = 1000;
 
-export function wobbleAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
+export function wobbleAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
   return trigger((options && options.anchor) || 'wobble', [
     transition(
-      '0 <=> 1',
+      `0 ${(options && options.direction) || '<=>'} 1`,
       [
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([

lib/common/interfaces.ts

@@ -24,3 +24,15 @@ export interface IAnimationOptions {
    */
   animateChildren?: 'before' | 'together' | 'after' | 'none';
 }
+
+export interface IAttentionSeekerAnimationOptions extends IAnimationOptions {
+  /**
+   * Indicates the direction of the state change expression in attention seekers.
+   *
+   * <=> is bidirectional (triggers whenever the state changes)
+   * => unidirectional (triggers whenever the state changes from false to true)
+   *
+   * Cannot be dynamic
+   */
+  direction?: '<=>' | '=>';
+}