有没有办法使用@ angular / animations通过离子特定的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属性进行动画处理：

Any => Any

为了使动画正常工作，您还必须在按钮中使用css opacity而不是--opacity。