Skip to content

Commit 0562e93

Browse files
filipowsfilipows
authored
Merge pull request #26 from dalepo/feat/parametrized-direction
Added directional parameter to attention seekers.
2 parents 2ed9c0b + d2361a0 commit 0562e93

File tree

11 files changed

+57
-29
lines changed

11 files changed

+57
-29
lines changed

‎README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ and use them in the template:
7979

8080
### Animations with state or triggered by state changes
8181

82-
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`
82+
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.
83+
84+
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`
8385

8486
```ts
8587
import { collapseAnimation, rubberBandAnimation } from 'angular-animations';
@@ -120,6 +122,21 @@ In a decorator:
120122
<div *ngIf="CONDITION" [@enter] [@leave]></div>
121123
```
122124

125+
Animations like Attention Seekers can take a direction parameter (cannot be in template)
126+
```ts
127+
@Component({
128+
...
129+
animations: [
130+
// triggers when STATE changes from false to true
131+
rubberBandAnimation({anchor: 'rubber', direction: '=>', duration: 500})
132+
]
133+
})
134+
```
135+
136+
```html
137+
<div [@rubber]="STATE"> </div>
138+
```
139+
123140
In a template (providing option for dynamic changes):
124141

125142
```ts

‎lib/attention-seekers/bounce.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const bounce = animation([
1919
animate(
@@ -34,10 +34,10 @@ const bounce = animation([
3434

3535
const DEFAULT_DURATION = 1000;
3636

37-
export function bounceAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
37+
export function bounceAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
3838
return trigger((options && options.anchor) || 'bounce', [
3939
transition(
40-
'0 <=> 1',
40+
`0 ${(options && options.direction) || '<=>'} 1`,
4141
[
4242
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4343
group([

‎lib/attention-seekers/flash.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const flash = animation([
1919
animate(
@@ -30,10 +30,10 @@ const flash = animation([
3030

3131
const DEFAULT_DURATION = 1000;
3232

33-
export function flashAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
33+
export function flashAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
3434
return trigger((options && options.anchor) || 'flash', [
3535
transition(
36-
'0 <=> 1',
36+
`0 ${(options && options.direction) || '<=>'} 1`,
3737
[
3838
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
3939
group([

‎lib/attention-seekers/jello.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const jello = animation([
1919
animate(
@@ -35,10 +35,10 @@ const jello = animation([
3535

3636
const DEFAULT_DURATION = 1000;
3737

38-
export function jelloAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
38+
export function jelloAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
3939
return trigger((options && options.anchor) || 'jello', [
4040
transition(
41-
'0 <=> 1',
41+
`0 ${(options && options.direction) || '<=>'} 1`,
4242
[
4343
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4444
group([

‎lib/attention-seekers/pulse.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
export interface IPulseAnimationOptions extends IAnimationOptions {
18+
export interface IPulseAnimationOptions extends IAttentionSeekerAnimationOptions {
1919
/**
2020
* Scale factor
2121
*
@@ -40,7 +40,7 @@ const DEFAULT_DURATION = 1000;
4040
export function pulseAnimation(options?: IPulseAnimationOptions): AnimationTriggerMetadata {
4141
return trigger((options && options.anchor) || 'pulse', [
4242
transition(
43-
'0 <=> 1',
43+
`0 ${(options && options.direction) || '<=>'} 1`,
4444
[
4545
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4646
group([

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const rubberBand = animation([
1919
animate(
@@ -32,10 +32,10 @@ const rubberBand = animation([
3232

3333
const DEFAULT_DURATION = 1000;
3434

35-
export function rubberBandAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
35+
export function rubberBandAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
3636
return trigger((options && options.anchor) || 'rubberBand', [
3737
transition(
38-
'0 <=> 1',
38+
`0 ${(options && options.direction) || '<=>'} 1`,
3939
[
4040
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4141
group([

‎lib/attention-seekers/shake.animation.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
export interface IShakeAnimationOptions extends IAnimationOptions {
18+
export interface IShakeAnimationOptions extends IAttentionSeekerAnimationOptions {
1919
/**
2020
* Shake size. Possible units: px, %, em, rem, vw, vh
2121
*
@@ -44,11 +44,10 @@ const shake = animation([
4444
]);
4545

4646
const DEFAULT_DURATION = 1000;
47-
4847
export function shakeAnimation(options?: IShakeAnimationOptions): AnimationTriggerMetadata {
4948
return trigger((options && options.anchor) || 'shake', [
5049
transition(
51-
'0 <=> 1',
50+
`0 ${(options && options.direction) || '<=>'} 1`,
5251
[
5352
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
5453
group([

‎lib/attention-seekers/swing.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const swing = animation([
1919
animate(
@@ -31,10 +31,10 @@ const swing = animation([
3131

3232
const DEFAULT_DURATION = 1000;
3333

34-
export function swingAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
34+
export function swingAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
3535
return trigger((options && options.anchor) || 'swing', [
3636
transition(
37-
'0 <=> 1',
37+
`0 ${(options && options.direction) || '<=>'} 1`,
3838
[
3939
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4040
group([

‎lib/attention-seekers/tada.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const tada = animation([
1919
animate(
@@ -36,10 +36,10 @@ const tada = animation([
3636

3737
const DEFAULT_DURATION = 1000;
3838

39-
export function tadaAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
39+
export function tadaAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
4040
return trigger((options && options.anchor) || 'tada', [
4141
transition(
42-
'0 <=> 1',
42+
`0 ${(options && options.direction) || '<=>'} 1`,
4343
[
4444
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4545
group([

‎lib/attention-seekers/wobble.animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useAnimation
1414
} from '@angular/animations';
1515

16-
import { IAnimationOptions } from '../common/interfaces';
16+
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

1818
const wobble = animation([
1919
animate(
@@ -32,10 +32,10 @@ const wobble = animation([
3232

3333
const DEFAULT_DURATION = 1000;
3434

35-
export function wobbleAnimation(options?: IAnimationOptions): AnimationTriggerMetadata {
35+
export function wobbleAnimation(options?: IAttentionSeekerAnimationOptions): AnimationTriggerMetadata {
3636
return trigger((options && options.anchor) || 'wobble', [
3737
transition(
38-
'0 <=> 1',
38+
`0 ${(options && options.direction) || '<=>'} 1`,
3939
[
4040
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4141
group([

0 commit comments

Comments
 (0)