創建過渡的角度2/4

Question

更改屬性時，我想，每當我更改屬性的值來創建一個過渡效果。

我試着做以下

@Component({ 
    selector: 'image-holder', 
    template: ` 
     <div class="carousel-image"> 
      <img src="{{ image }}" [@slideInRight]="slide" /> 
      <span>{{ text }}</span> 
     </div> 
    `, 
    styleUrls: ['../greenscreen.scss'], 
    animations: [ 
     trigger(
      'slideInRight', 
      [ 
       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})) 
       ] 
      ) 
      ]) 
    ] 
}) 
export class ImageHolderComponent implements OnChanges { 
    @Input() 
     image: string; 
    @Input() 
     text: string; 

    public slide: boolean = true; 

    public ngOnChanges(changes: { [propKey: string]: SimpleChange }){ 
     this.slide = !this.slide; 
    } 
} 

我以爲她更改屬性將觸發組件再次啓動動畫效果，但如預期

Answer 1

this.slide =不起作用！ this.slide將真假 但是當我看你觸發你說 [@slideInRight] =「幻燈片」

所以基本上，真的還是假的。

但是當我看着你的動畫我看到：進入和離開這裏

什麼，如果不是你是「真」和「假」，或者嘗試1和0

那麼你的動畫會工作時slideInRight是真是假，它會觸發相應的真假動畫。

trigger('work', [ 
    state('*', style({transform: 'translateX(0)', opacity: 1})), 
    state('true', style({'border-right': '50px solid #72BF44', opacity: 1})), 
    state('false', style({'border-right': '20px solid #72BF44', opacity: 1})), 
    transition('1 => 0', animate('.125s .1s cubic-bezier(0.29, 0.06, 0.43, 0.92)')), 
    transition('0 => 1', animate('.125s 0s cubic-bezier(0.29, 0.06, 0.43, 0.92)')), 
    transition('void => *', [ 
    style({transform: 'translateX(-100%)', opacity: 0}), 
    animate('1s 1.1s cubic-bezier(0.29, 0.06, 0.43, 0.92)') 
    ]) 
]) 

我已經在應用程序中使用了一個示例觸發器。

你需要設置你的狀態爲開啓和關閉/真假或任何變量值你想（字符串，等等）。

，那麼你必須從雲的過渡......時真亦假，假到真或void爲真，無論你以前的狀態和目前的狀態是，這種轉變將觸發。

Answer 2

您可以使用* ngFor對於那些使用情況下，即使它只是一個單一的對象。

@Component({ 
    selector: 'image-holder', 
    template: ` 
    <div class="carousel-image"> 
     <img [src]="image" *ngFor="let image of [image]" [@slideInRight]/> 
     <span>{{ text }}</span> 
    </div> 
    `, 
    styleUrls: ['../greenscreen.scss'], 
    animations: [ 
    trigger(
     'slideInRight', 
     [ 
     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})) 
      ] 
     ) 
     ]) 
    ] 
}) 
export class ImageHolderComponent { 
    @Input() 
    image: string; 
    @Input() 
    text: string; 

}