有没有一种方法可以使用@angular/animations 通过 Ionic 特定的 css 属性进行动画处理？

Question

我有一个离子按钮，我想将它的不透明度设置为从 0 到 1 的动画。问题是我需要使用 css 属性 "--opacity" 来做到这一点，根据离子文档。

我试过按原样使用“--opacity”属性，但它返回了一个错误。

import { trigger, animate, transition, style, state } from '@angular/animations';

export const buttonFadeIn =
trigger('buttonFadeIn', [
  state('in', style({ 
    "--opacity": 1,
  })),
  transition("* => in", animate('500ms ease-in-out')),
  state('out', style({ 
    "--opacity": 0,    
  })),
  transition("* => out", animate('220ms ease'))
]);

Answer 1

您正在尝试为“--opacity”设置动画，这是一个离子属性，请尝试为 css opacity 属性设置动画：

import { trigger, animate, transition, style, state } from '@angular/animations';

export const buttonFadeIn =
trigger('buttonFadeIn', [
  state('in', style({ 
    opacity: 1,
  })),
  transition("* => in", animate('500ms ease-in-out')),
  state('out', style({ 
    opacity: 0,    
  })),
  transition("* => out", animate('220ms ease'))
]);

您还必须在按钮中使用 css 不透明度而不是 --opacity 才能使动画正常工作。

有没有一种方法可以使用@angular/animations 通过 Ionic 特定的 css 属性进行动画处理？

Is there a way to animate through Ionic specific css properties with @angular/animations?

angular

ionic4