我有一个离子按钮,我想要将它的不透明度从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'))
]);
您正在尝试设置“--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而不是--opacity才能使动画生效。