कोणीय 2 एनजीआईएफ और सीएसएस संक्रमण / एनीमेशन

Question

मैं एक कोणीय 2 में सीएसएस का उपयोग करके दाईं ओर से स्लाइड करना चाहता हूं।

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

मैं ठीक काम करता हूं अगर मैं केवल [ngClass] वर्ग का उपयोग करता हूं और अस्पष्टता का उपयोग करता हूं। लेकिन ली नहीं चाहते हैं कि तत्व को शुरुआत से ही प्रदान किया जाए इसलिए मैं इसे पहले ngIf के साथ "छिपा" दूं, लेकिन फिर संक्रमण काम नहीं करेगा।

.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;
}

Answer 1

अद्यतन 4.1.0

Plunker

Https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2018-02-24 भी देखें

अद्यतन 2.1.0

Plunker

अधिक जानकारी के लिए angular.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;
}

मूल

*ngIfअभिव्यक्ति बनने पर DOM से एलिमेंट हटाता है false। आपके पास एक गैर-मौजूदा तत्व पर संक्रमण नहीं हो सकता है।

इसके बजाय उपयोग करें hidden:

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

Comments

हां, छिपा हुआ ही इसे अदृश्य बनाता है लेकिन तत्व अभी भी मौजूद है। *ngIfइसे पूरी तरह से DOM से हटा देता है।

— गुंटर ज़ोचबॉयर

यह पसंद है display:none। कोई display:hiddenAFAIK नहीं है ।

— गुंटर ज़ोचबॉयर

@ GünterZöchbauer हां, अपारदर्शिता हार्डवेयर के रूप में अच्छी तरह से उच्चारण है, इसलिए यह बेहतर होगा।

— Æंद्री डोमी

कोई बात नहीं। अस्पष्टता तत्व को नहीं हटाएगी और अभी भी नीचे के तत्वों को कवर करेगी, मैं स्केल (0) का उपयोग करने का सुझाव देता हूं जो UI को प्रभावित करेगा जैसे कि प्रदर्शन: कोई नहीं; लेकिन एक अच्छा संक्रमण के साथ। ओपी वह कोणीय एनिमेशन का उपयोग कर सकते जवाब देने के लिए angular.io/docs/ts/latest/guide/animations.html शून्य राज्य में पैमाने (0): को बदलने के साथ

— Ændri Domi

ट्रिगर, शैली, चेतन और संक्रमण आइटम अब @ कोणीय / एनिमेशन से शामिल किए जाने चाहिए। तो आयात{ trigger, style, animate, transition } from '@angular/animations';

— जोएल हर्नांडेज़

Answer 2

नवीनतम कोणीय 2 प्रलेखन के अनुसार आप "एन्टरिंग और लीविंग" तत्वों को (जैसे कोणीय 1) में चेतन कर सकते हैं ।

सरल फीका एनीमेशन का उदाहरण:

प्रासंगिक @Component में जोड़ें:

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})) 
    ])
  ])
]

आयात जोड़ना न भूलें

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

प्रासंगिक घटक का HTML का तत्व इस तरह दिखना चाहिए:

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

मैंने यहां स्लाइड और फीका एनीमेशन का उदाहरण बनाया है ।

'शून्य' और '*' पर स्पष्टीकरण :

• voidवह अवस्था है जब ngIfझूठे पर सेट किया जाता है (यह तब लागू होता है जब तत्व एक दृश्य से जुड़ा नहीं होता है)।
• *- कई एनीमेशन स्टेट्स हो सकते हैं (डॉक्स में अधिक पढ़ें)। *राज्य एक "वाइल्डकार्ड" के रूप में उन सभी को पर पूर्वता लेता है (मेरे उदाहरण में इस राज्य जब है ngIfपर सेट है true)।

सूचना (कोणीय डॉक्स से लिया गया):

एप्लिकेशन मॉड्यूल के अंदर अतिरिक्त घोषणा, import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

कोणीय एनिमेशन मानक वेब एनिमेशन एपीआई के शीर्ष पर बनाए गए हैं और उन ब्राउज़रों पर मूल रूप से चलते हैं जो इसका समर्थन करते हैं। अन्य ब्राउज़रों के लिए, एक पॉलीफिल की आवश्यकता होती है। GitHub से web-animations.min.js को पकड़ो और इसे अपने पेज पर जोड़ें।

Comments

कोणीय एनिमेशन का उपयोग करने के लिए BrowserAnimationsModule को आयात करने की आवश्यकता है। यदि मैं गलत नहीं हूं, तो एनीमेशन मॉड्यूल को अपने स्वयं के मॉड्यूल में ले जाने से पहले कोणीय 2 के मुख्य मॉड्यूल में पाया गया था, इसलिए आपको आयात के बिना कई प्लंकर उदाहरण क्यों मिलते हैं। यहाँ आयात के साथ एक अपडेट किया गया plnkr है: लिंक

— Snaplemouton

इस तरह के दृष्टिकोण का उपयोग करते समय leaveएनीमेशन नहीं हो रहा है, क्योंकि घटक को डोम से हटा दिया *ngIfजाता है।

— स्लाव फोमिन II

यह स्वीकृत उत्तर होना चाहिए, यह वास्तव में उन लोगों को समाधान देता है जो एनजीआईएफ का उपयोग करना चाहते हैं न कि अन्य वर्कअराउंड।

— ओवी ट्रिफ

Answer 3

    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: '*' }))
      ])
    ])

Answer 4

आधुनिक ब्राउज़रों के लिए सीएसएस केवल समाधान

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

Comments

प्रवेश के लिए अच्छा विकल्प CSS-only संक्रमण। ng-enterवर्ग उपयोग से पलायन के लिए एक अस्थायी समाधान के रूप में इसका इस्तेमाल किया।

— edmundo096

Answer 5

एक तरीका यह है कि एनजीआई संपत्ति के लिए एक सेटर का उपयोग करें और मूल्य को अपडेट करने के हिस्से के रूप में राज्य को सेट करें।

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;
}

Answer 6

कोणीय 5 का उपयोग कर रहा हूं और मेरे लिए काम करने के लिए एक एनजीफ के लिए जो एक एनकोफ़ोर में है, मुझे चेतन उपयोगकर्ता का उपयोग करना था और उपयोगकर्ता-विस्तारक घटक में मैंने छिपाने वाले उपयोगकर्ता को दिखाने के लिए * ngIf = "user.expanded" का उपयोग किया और इसमें प्रवेश करने के लिए काम किया। एक जा रहा है

 <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%)'}))
    ])
  ])
];

Answer 7

मेरे मामले में मैंने गलती से गलत घटक पर एनीमेशन घोषित किया।

app.component.html

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

एनीमेशन को उस घटक पर घोषित किया जाना चाहिए जहां तत्व ( appComponent.ts) में उपयोग किया जाता है । मैं OrderDetailsComponent.tsइसके बजाय एनीमेशन की घोषणा कर रहा था ।

उम्मीद है कि यह किसी को एक ही गलती करने में मदद करेगा