CODEWITHSUNDEEP
angularionic4
Igor
Igor

Reputation: 836

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

I have an ion-button and I want to animate it's opacity from 0 to 1. The problem is that I need to use the css property "--opacity" to do that, according the ionic documentation.

I've tried to just use the "--opacity" property as is and it returned an error.

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

Upvotes: 1

Views: 115

Answers (1)

Alison Steffani Vargas
Alison Steffani Vargas

Reputation: 26

You are trying to animate "--opacity", which is a ionic property, try to animate css opacity property instead:

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

You also have to use css opacity in your button instead of --opacity in order for the animation to work.

Upvotes: 1

Related Questions