góc 2 ngIf và chuyển đổi / hoạt ảnh CSS

Tôi muốn một div trượt vào từ bên phải trong góc 2 bằng cách sử dụng css.

  <div class="note" [ngClass]="{'transition':show}" *ngIf="show">
    <p> Notes</p>
  </div>
  <button class="btn btn-default" (click)="toggle(show)">Toggle</button>

Tôi hoạt động tốt nếu tôi chỉ sử dụng [ngClass] để chuyển đổi lớp và sử dụng độ mờ. Nhưng li không muốn phần tử đó được hiển thị ngay từ đầu nên tôi "ẩn" nó với ngIf trước, nhưng sau đó quá trình chuyển đổi sẽ không hoạt động.

.transition{
  -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
  -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  margin-left: 1500px;
  width: 200px;
  opacity: 0;
}

.transition{
  opacity: 100;
  margin-left: 0;
}

cập nhật 4.1.0

Plunker

Xem thêm https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24

cập nhật 2.1.0

Plunker

Để biết thêm chi tiết, hãy xem Ảnh động tại angle.io

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

@Component({
  selector: 'my-app',
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ],
  template: `
    <button (click)="show = !show">toggle show ({{show}})</button>

    <div *ngIf="show" [@enterAnimation]>xxx</div>
  `
})
export class App {
  show:boolean = false;
}

nguyên

*ngIfloại bỏ phần tử khỏi DOM khi biểu thức trở thành false. Bạn không thể có sự chuyển đổi trên một phần tử không tồn tại.

Sử dụng thay thế hidden:

<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">

Theo tài liệu góc 2 mới nhất, bạn có thể tạo hiệu ứng cho các phần tử "Vào và ra" (như trong góc 1).

Ví dụ về hoạt ảnh mờ dần đơn giản:

Trong @Component có liên quan, hãy thêm:

animations: [
  trigger('fadeInOut', [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({opacity:0}),
      animate(500, style({opacity:1})) 
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(500, style({opacity:0})) 
    ])
  ])
]

Đừng quên thêm nhập khẩu

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

Phần tử html của thành phần có liên quan sẽ giống như sau:

<div *ngIf="toggle" [@fadeInOut]>element</div>

Tôi đã xây dựng ví dụ về hoạt ảnh slide và fade ở đây .

Giải thích về 'void' và '*':

• voidlà trạng thái khi ngIfđược đặt thành false (áp dụng khi phần tử không được gắn vào một khung nhìn).
• *- Có thể có nhiều trạng thái hoạt hình (đọc thêm trong tài liệu). Các *nhà nước được ưu tiên hơn tất cả trong số họ như là một "đại diện" (trong ví dụ của tôi đây là trạng thái khi ngIfđược thiết lập để true).

Lưu ý (lấy từ tài liệu góc):

Khai báo bổ sung bên trong mô-đun ứng dụng, import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Hoạt ảnh góc được xây dựng dựa trên API Web Animations tiêu chuẩn và chạy nguyên bản trên các trình duyệt hỗ trợ nó. Đối với các trình duyệt khác, polyfill là bắt buộc. Lấy web-animations.min.js từ GitHub và thêm nó vào trang của bạn.

    trigger('slideIn', [
      state('*', style({ 'overflow-y': 'hidden' })),
      state('void', style({ 'overflow-y': 'hidden' })),
      transition('* => void', [
        style({ height: '*' }),
        animate(250, style({ height: 0 }))
      ]),
      transition('void => *', [
        style({ height: '0' }),
        animate(250, style({ height: '*' }))
      ])
    ])

Giải pháp CSS chỉ dành cho các trình duyệt hiện đại

@keyframes slidein {
    0%   {margin-left:1500px;}
    100% {margin-left:0px;}
}
.note {
    animation-name: slidein;
    animation-duration: .9s;
    display: block;
}

Một cách là sử dụng bộ định thời cho thuộc tính ngIf và đặt trạng thái như một phần của việc cập nhật giá trị.

Ví dụ về StackBlitz

fade.component.ts

 import {
    animate,
    AnimationEvent,
    state,
    style,
    transition,
    trigger
  } from '@angular/animations';
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

  export type FadeState = 'visible' | 'hidden';

  @Component({
    selector: 'app-fade',
    templateUrl: './fade.component.html',
    styleUrls: ['./fade.component.scss'],
    animations: [
      trigger('state', [
        state(
          'visible',
          style({
            opacity: '1'
          })
        ),
        state(
          'hidden',
          style({
            opacity: '0'
          })
        ),
        transition('* => visible', [animate('500ms ease-out')]),
        transition('visible => hidden', [animate('500ms ease-out')])
      ])
    ],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class FadeComponent {
    state: FadeState;
    // tslint:disable-next-line: variable-name
    private _show: boolean;
    get show() {
      return this._show;
    }
    @Input()
    set show(value: boolean) {
      if (value) {
        this._show = value;
        this.state = 'visible';
      } else {
        this.state = 'hidden';
      }
    }

    animationDone(event: AnimationEvent) {
      if (event.fromState === 'visible' && event.toState === 'hidden') {
        this._show = false;
      }
    }
  }

fade.component.html

 <div
    *ngIf="show"
    class="fade"
    [@state]="state"
    (@state.done)="animationDone($event)"
  >
    <button mat-raised-button color="primary">test</button>
  </div>

example.component.css

:host {
  display: block;
}
.fade {
  opacity: 0;
}

Tôi đang sử dụng angle 5 và để một ngif hoạt động đối với tôi trong ngfor, tôi phải sử dụng animateChild và trong thành phần user-detail, tôi đã sử dụng * ngIf = "user.expanded" để ẩn người dùng và nó hoạt động để nhập một sự ra đi

 <div *ngFor="let user of users" @flyInParent>
  <ly-user-detail [user]= "user" @flyIn></user-detail>
</div>

//the animation file


export const FLIP_TRANSITION = [ 
trigger('flyInParent', [
    transition(':enter, :leave', [
      query('@*', animateChild())
    ])
  ]),
  trigger('flyIn', [
    state('void', style({width: '100%', height: '100%'})),
    state('*', style({width: '100%', height: '100%'})),
    transition(':enter', [
      style({
        transform: 'translateY(100%)',
        position: 'fixed'
      }),
      animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)', style({transform: 'translateY(0%)'}))
    ]),
    transition(':leave', [
      style({
        transform: 'translateY(0%)',
        position: 'fixed'
      }),
      animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)', style({transform: 'translateY(100%)'}))
    ])
  ])
];

Trong trường hợp của tôi, tôi đã khai báo hoạt ảnh trên thành phần sai do nhầm lẫn.

app.component.html

  <app-order-details *ngIf="orderDetails" [@fadeInOut] [orderDetails]="orderDetails">
  </app-order-details>

Hoạt ảnh cần được khai báo trên thành phần mà phần tử được sử dụng trong ( appComponent.ts). OrderDetailsComponent.tsThay vào đó, tôi đã khai báo hoạt ảnh .

Hy vọng rằng nó sẽ giúp ai đó mắc phải sai lầm tương tự