Creating a transition when changing properties in angular 2/4

Question

I want to create a transition effect whenever I change the value of a property.

I tried doing the following

    @Component({   
    selector: \'ima         


        

Answer 1

this.slide = !this.slide would be true and false but when I look at your trigger you are saying [@slideInRight]="slide"

so basically, true or false.

but when I look in your animations I see :enter and :leave

what if instead you did 'true' and 'false' or try 1 and 0

then your animations would work when slideInRight is true or false and it would trigger the corresponding animation for true and false.

    trigger('work', [
  state('*', style({transform: 'translateX(0)', opacity: 1})),
  state('true', style({'border-right': '50px solid #72BF44', opacity: 1})),
  state('false', style({'border-right': '20px solid #72BF44', opacity: 1})),
  transition('1 => 0', animate('.125s .1s cubic-bezier(0.29, 0.06, 0.43, 0.92)')),
  transition('0 => 1', animate('.125s 0s cubic-bezier(0.29, 0.06, 0.43, 0.92)')),
  transition('void => *', [
    style({transform: 'translateX(-100%)', opacity: 0}),
    animate('1s 1.1s cubic-bezier(0.29, 0.06, 0.43, 0.92)')
  ])
])

I've included a sample trigger that I have used in a application.

you need to setup your states for on and off / true and false or whatever variable values you want (string, etc).

then you have a transition that goes from... true to false, or false to true, or void to true, whatever your previous state and current state are, that transition will trigger.