How to keep state of one Angular2 animation while triggering another animation that changes the same css property -

i'm doing simple image viewer , want able rotate , flip image. i'm using angular 2 animations. when flip image, rotation value stays same, image no longer shows styling of corresponding state.

here html:

<div class="image-container">   <div [@flipped]='flipped' [@rotation]='rotation' id="covers-image" [@size]="size">     <img  (click)="flip()" id="actualimage" src={{imageurl}} alt="apod">   </div>   <hr>   <div class="button-container">     <button class="btn btn-success" (click)="loadimage()">load image</button>     <button class="btn btn-success" (click)="clearimage()">clear image</button>     <button class="btn btn-success" (click)="shrinkimage()">small</button>     <button class="btn btn-success" (click)="mediumimage()">medium</button>     <button class="btn btn-success" (click)="enlargeimage()">large</button>     <button class="btn btn-success" (click)="rotateimage()">rotate</button>   </div> </div> 

here component:

import {    component,   style,   trigger,   state,   animate,   transition } '@angular/core';  @component({   selector: 'napr-image-side',   templateurl: './image-side.component.html',   styleurls: ['./image-side.component.css'],   animations: [     trigger('size', [       state('small', style({         width: '50%',         margin: '20%'       })),       state('medium', style({         width: '75%',         margin: '10%'       })),       state('large', style({         width: '100%',         margin: '0%'       })),       state('cleared', style({         width: '0%',         display: 'none'       })),       transition('* => cleared', [style({transform: 'rotate(1080deg)'}), animate(1000)]),       transition('small <=> *', animate(500)),       transition('medium <=> *', animate(500)),       transition('large <=> *', animate(500))     ]   ),     trigger('flipped', [       state('flipped', style({         transform: 'scaley(-1)'       })),       state('unflipped', style({         transform: 'scaley(1)'       })),       transition('flipped <=> unflipped', animate(500))       ]     ),     trigger('rotation' ,[       state('90', style({         transform: 'rotate(90deg)'       })),       state("180", style({         transform: 'rotate(180deg)'       })),       state("270", style({         transform: 'rotate(270deg)'       })),       state("0", style({         transform: 'rotate(0deg)'       }))     ])   ] }) export class imagesidecomponent {   imageurl: string;   size: string = "";   flipped: string ='unflipped';   rotation: string = '0';    loadimage() {     this.imageurl = 'src/assets/ngc1275_hubblepestana_960.jpg';     this.size = 'medium';   }   clearimage() {     this.size = 'cleared';   }   shrinkimage() {     if(this.size != 'cleared') {this.size = 'small';}   }    mediumimage() {     if(this.size != 'cleared') {this.size = 'medium';}   }    enlargeimage() {     if(this.size != 'cleared') {this.size = 'large';}   }    flip() {     this.flipped = this.flipped == 'flipped' ? 'unflipped' : 'flipped';     console.log(this.rotation);   }    rotateimage() {     if(parseint(this.rotation) + 90 == 360){       this.rotation = "0";     } else {       this.rotation = (parseint(this.rotation) + 90).tostring();     }   } } 

so size changing works perfectly, , when flip or rotate keeps size, reason when flip, rotation animation resets. guess because both use transform property, when set flipped state, resets transform property set (scaley(-1)) in case.

is there way pass in component variable values component animation metadata? or other solution?