在角度2/4中更改属性时创建过渡

每当我更改属性的值时,我想创建一个过渡效果.

我尝试过以下操作

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

我假设更改属性将触发组件再次启动动画效果,但这不会按预期工作

您可以对这些用例使用* ngFor,即使它只是一个对象.

@Component({
  selector: 'image-holder',template: `
    <div class="carousel-image">
      <img [src]="image" *ngFor="let image of [image]" [@slideInRight]/>
      <span>{{ text }}</span>
    </div>
  `,animations: [
    trigger(
      'slideInRight',[
        transition(
          ':enter',[
            style({transform: 'translateX(100%)',opacity: 1}))
          ]
        ),transition(
          ':leave',[
            style({transform: 'translateX(0)',style({transform: 'translateX(-100%)',opacity: 0}))
          ]
        )
      ])
  ]
})
export class ImageHolderComponent {
  @Input()
  image: string;
  @Input()
  text: string;

}

原文链接：https://www.f2er.com/angularjs/143822.html

在角度2/4中更改属性时创建过渡

猜你在找的Angularjs相关文章