انتقالات / رسوم متحركة ngIf و CSS في Angular 2

كيفية تحريك div من اليمين باستخدام CSS في Angular 2؟

  
 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

يستخدم واجهة برمجة تطبيقات الرسوم المتحركة الانتقالية، ولم تعد هناك حاجة لاستخدام [خفي] أو [*ngIf مخفي].

التحديث 2.1.0

عرض الرسوم المتحركة على angular.io

استيراد { المشغل، النمط، الرسوم المتحركة ، انتقال } من '@angular/animations'؛ @عنصر({ المحدد: "تطبيقي"، الرسوم المتحركة: [ مشغل( "أدخل الرسوم المتحركة"، [ الانتقال (': أدخل'، [ النمط ({تحويل: 'translateX(100%)'، العتامة: 0})، تحريك ('500 مللي ثانية'، نمط ({تحويل: 'translateX(0)'، العتامة: 1})) ])، الانتقال (':مغادرة'، [ نمط ({تحويل: 'translateX(0)'، العتامة: 1})، تحريك ('500 مللي ثانية'، نمط ({تحويل: 'translateX(100%)'، العتامة: 0})) ]) ] ) ]، القالب: ` تبديل العرض ({{show}}) ` }) تطبيق فئة التصدير { إظهار: منطقية = خطأ؛

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، ولا يمكن نقل العنصر غير الموجود. يمكن استبدال

بالسمة المخفية: