在角度2/4中更改属性时创建过渡 [英] Creating a transition when changing properties in angular 2/4

问题描述

无论何时更改属性值，我都想创建过渡效果。

I want to create a transition effect whenever I change the value of a property.

我尝试执行以下操作

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

我以为更改属性会触发组件重新启动动画效果，但效果不理想

What I assumed was changing the property would trigger the component to start the animation effect again but that doesn't work as expected

推荐答案

对于这些用例，甚至可以使用* ngFor

You can use *ngFor for those use cases, even if it's just a single object.

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

}

这篇关于在角度2/4中更改属性时创建过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！