ngIf और Angular 2 में CSS संक्रमण/एनिमेशन

Angular 2 में CSS का उपयोग करके दाईं ओर से एक div को कैसे स्लाइड करें?

  
 Notes

Toggle

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

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

अपडेट 4.1.0

ट्रांज़िशन एनीमेशन एपीआई का उपयोग करता है, अब [hidden] या [*ngIfhided] का उपयोग करने की आवश्यकता नहीं है।

अद्यतन 2.1.0

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: `
    toggle show ({{show}})

    
xxx
  `
})
export class App {
  show:boolean = false;
}

मूल उत्तर

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

को छिपी हुई विशेषता से बदला जा सकता है: