Angular (4, 5, 6, 7) - A simple example of a slide animation on ngIf

What is the minimal and native way of Angular4 to insert and push a container element?

eg

<div ngIf="show">
    <!-- Content -->
</div>

Paste the content (top to bottom, like jQuery. SlideDown ()) when the show turns true.

Pull out the content (corresponding to the slow effect) when the impression turns to false

+25
source share
4 answers

First a little code, then an explanation. White papers describing this are here .

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

In your template:

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

angular , , .

:

  • "slideInOut".
  • (: ), :
  • → 100% ( ), .
  • - > translateY , 0%, , , .

  • , translateY ( 0), -100% ( ).

, , , 200 .

, !

+74

, :

, . app.component.ts

div, 0px ( ), 500 , , .

( ), , , .

animations.ts

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

app.component , .

app.component.ts

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

app.component.html:

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut , animations.ts

StackBlitz, : https://angular-muvaqu.stackblitz.io/

. BrowserAnimationsModule, app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})
+23

Angular, ( ), DOM, show true, / CSS.

, :

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

CSS- , - :

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

- , transition.

+6

:

animations: [
    trigger('openClose', [
        state('open', style({
            height: '*',
            opacity: '1'
        })),
        state('closed', style({
            height: '0px',
            opacity: '0'
        })),
        transition('open => closed', [
            animate('0.5s')
        ]),
        transition('closed => open', [
            animate('0.5s')
        ]),
    ]),
],

:

<whatever [@openClose]="show ? 'open' : 'closed'"></whatever>

:

<button (click)="toggleShow()">
    <span *ngIf="show; else hideNode">Hide</span>
    <ng-template #hideNode>Show</ng-template>
</button>

:

export class ShowHideComponent {
    show = false;

    toggleShow() {
        this.show = !this.show;
    }
}
0

Source: https://habr.com/ru/post/1689157/


All Articles