কৌণিক 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] ব্যবহার করি তবে আমি ঠিকঠাক কাজ করি। তবে লি চান না যে উপাদানটি শুরু থেকেই রেন্ডার করা হোক তাই আমি প্রথমে এনজিআইএফ দিয়ে এটি "লুকিয়ে রাখি" তবে তারপরে রূপান্তরটি কার্যকর হবে না।

.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-2017-02-24 আরও দেখুন

আপডেট 2.1.0

Plunker

আরও তথ্যের জন্য দেখুন অ্যানিমুলার এনিমেশনগুলি

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

হ্যাঁ, লুকানো কেবল এটি অদৃশ্য করে তোলে তবে উপাদান এখনও বিদ্যমান exists *ngIfএটি পুরোপুরি ডিওএম থেকে অপসারণ করে।

— গন্টার জ্যাচবাউয়ার

এটা মত display:none। সেখানে নেই display:hiddenআমি যতদূর জানি।

— গন্টার জ্যাচবাউয়ার

@ গন্তেরজ্যাচবাউয়ার হ্যাঁ, অস্বচ্ছতা হল হার্ডওয়্যার অবিচ্ছিন্ন তাই এটি আরও ভাল মানায়।

— ইন্দ্রি ডোমি

কিছু মনে করো না. অস্বচ্ছতা উপাদানটিকে সরাবে না এবং তলদেশের নীচে আবরণ করবে, আমি স্কেল (0) ব্যবহার করার পরামর্শ দিচ্ছি যা ইউআই যেমন ডিসপ্লে হিসাবে প্রভাবিত করবে: কিছুই নয়; তবে একটি সুন্দর রূপান্তর সহ। ওপিকে উত্তর দেওয়ার জন্য তিনি কৌণিক অ্যানিমেশনগুলি Angular.io/docs/ts/latest/guide/animations.html ব্যবহার করতে পারেন রূপান্তর সহ: স্কেল (0)

— শূন্য

ট্রিগার, স্টাইল, অ্যানিমেট এবং ট্রানজিশন আইটেমগুলি এখন @ কৌনিক / অ্যানিমেশন থেকে অন্তর্ভুক্ত করা উচিত। সুতরাং আমদানি করুন{ trigger, style, animate, transition } from '@angular/animations';

— জোয়েল হার্নান্দেজ

Answer 2

সর্বশেষ কৌণিক 2 ডকুমেন্টেশন অনুসারে আপনি "প্রবেশ এবং ছেড়ে" উপাদানগুলিকে অ্যানিমেট করতে পারেন (কৌণিক 1 এর মতো)।

সাধারণ বিবর্ণ অ্যানিমেশনের উদাহরণ:

প্রাসঙ্গিক @ কম্পোনেন্টে যোগ করুন:

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

প্রাসঙ্গিক উপাদানটির এইচটিএমএল উপাদানটি দেখতে পাওয়া উচিত:

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

আমি এখানে স্লাইড এবং বিবর্ণ অ্যানিমেশনের উদাহরণ তৈরি করেছি ।

'অকার্যকর' এবং '*' এর উপর ব্যাখ্যা :

• voidngIfমিথ্যাতে সেট করা হলে এমন অবস্থা (যখন উপাদানটি কোনও দৃশ্যের সাথে সংযুক্ত থাকে না তখন এটি প্রযোজ্য)।
• *- অনেক অ্যানিমেশন রাজ্য থাকতে পারে (ডক্সে আরও পড়ুন)। *রাষ্ট্র একটি "ওয়াইল্ডকার্ড" হিসেবে তাদের সব অগ্রগণ্য (আমার উদাহরণে এই অবস্থায় যখন ngIfসেট করা হয় true)।

বিজ্ঞপ্তি (কৌনিক ডক্স থেকে নেওয়া):

অ্যাপ্লিকেশন মডিউলের ভিতরে অতিরিক্ত ঘোষণা করুন, import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

কৌণিক অ্যানিমেশনগুলি স্ট্যান্ডার্ড ওয়েব অ্যানিমেশনগুলি API এর উপরে নির্মিত হয় এবং এটি সমর্থন করে এমন ব্রাউজারগুলিতে নেটিভভাবে চালিত হয়। অন্যান্য ব্রাউজারগুলির জন্য, একটি পলিফিল প্রয়োজন। গিটহাব থেকে ওয়েব-অ্যানিমেশনগুলি.মিন.জেগুলি ধরুন এবং এটি আপনার পৃষ্ঠায় যুক্ত করুন।

Comments

কৌণিক অ্যানিমেশনগুলি ব্যবহার করার জন্য ব্রাউজারঅ্যানিমেশনস মডেলটি আমদানি করা দরকার। যদি আমি ভুল না হয়ে থাকি তবে অ্যানিমেশন মডিউলটি তার নিজস্ব মডিউলে স্থানান্তরিত হওয়ার আগে কৌনিক 2 এর মূল মডিউলটিতে পাওয়া গিয়েছিল, সুতরাং কেন আপনি আমদানি ছাড়াই বহু প্লাঙ্কার উদাহরণ খুঁজে পান। আমদানি সহ এখানে একটি আপডেট হওয়া প্ল্যানকর: লিঙ্ক

— স্ন্যাপলমাউটনে

এই জাতীয় পদ্ধতির ব্যবহার করার সময় leaveঅ্যানিমেশনটি হচ্ছিল না, কারণ এর *ngIfআগে ডোন থেকে উপাদানটি সরানো হয় ।

— স্লাভা ফমিন দ্বিতীয়

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, এটি আসলে যারা এনজিআইএফ ব্যবহার করতে চান এবং অন্যান্য কাজের ক্ষেত্রগুলি নয় তাদের সমাধান দেয়।

— ওভি ত্রিফ

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

CSS কেবলমাত্র আধুনিক ব্রাউজারগুলির জন্য সমাধান

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

Comments

সিএসএস-কেবল স্থানান্তর প্রবেশের জন্য ভাল বিকল্প । ng-enterশ্রেণীর ব্যবহার থেকে স্থানান্তরিত করার জন্য এটি অস্থায়ী সমাধান হিসাবে ব্যবহৃত হয় ।

— edmundo096

Answer 5

একটি উপায় হ'ল এনজিআইএফ সম্পত্তিটির জন্য একটি সেটার ব্যবহার করা এবং মানটি আপডেট করার অংশ হিসাবে রাষ্ট্রকে সেট করা।

স্ট্যাকব্লিটজ উদাহরণ

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পরিবর্তে অ্যানিমেশন ঘোষণা ছিল ।

আশা করি এটি একই ভুল করতে কাউকে সহায়তা করবে