在 angular 2/4 中更改属性时创建过渡答案

【问题标题】：Creating a transition when changing properties in angular 2/4在 angular 2/4 中更改属性时创建过渡
【发布时间】：2017-10-10 02:45:26
【问题描述】：

我想在更改属性值时创建过渡效果。

我尝试了以下操作

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

我假设更改属性会触发组件再次启动动画效果，但这并没有按预期工作

【问题讨论】：

标签： angular animation web-animations

【解决方案1】：

您可以将 *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;

}

【讨论】：

为我工作。请记住在方法调用周围加上“[]”。

【解决方案2】：

this.slide = !this.slide 是真假但是当我看到你的触发器时，你在说 [@slideInRight]="幻灯片"

所以基本上，对或错。

但是当我查看您的动画时，我看到 :enter 和 :leave

如果你改为“真”和“假”或尝试 1 和 0 会怎样

那么当 slideInRight 为 true 或 false 时，您的动画将起作用，并且它会触发相应的 true 和 false 动画。

    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)')
  ])
])

我已经包含了一个我在应用程序中使用过的示例触发器。

您需要为 on 和 off / true 和 false 或您想要的任何变量值（字符串等）设置您的状态。

然后你有一个从……真到假，或假到真，或无效到真的转换，无论你以前的状态和当前状态是什么，这个转换都会触发。

【讨论】：