有没有办法用@ angular / animations通过Ionic特定的css属性制作动画?

问题描述 投票:1回答:1

我有一个离子按钮,我想要将它的不透明度从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'))
]);
angular ionic4
1个回答
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而不是--opacity才能使动画生效。

© www.soinside.com 2019 - 2024. All rights reserved.