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

发布时间：2020-12-17 08:00:27 所属栏目：安全来源：网络整理

导读：每当我更改属性的值时,我想创建一个过渡效果. 我尝试过以下操作 @Component({ selector: 'image-holder',template: ` div class="carousel-image" img src="{{ image }}" [@slideInRight]="slide" / span{{ text }}/span /div `,styleUrls: ['../greenscreen

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

我尝试过以下操作

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

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!