la cuestion es asi: tengo tres imagenes puestas en la parte html del componente de Angular
<img class="img" [@Esc]='escala' (mouseover)="escalar()" (mouseout)="desescalar()" src="./assets/1.jpg" >
<img class="img" [@Esc]='escala' (mouseover)="escalar()" (mouseout)="desescalar()" src="./assets/2.jpg" >
<img class="img" [@Esc]='escala' (mouseover)="escalar()" (mouseout)="desescalar()" src="./assets/3.jpg" >
la idea es que al pasar el mouse sobre una de esta, escale su tamaño a 1.5 y al retirar vuelva a su escala a 1.
en mi TypeScript hago la animacion, el problema esta que cuando paso el mouse por sobre el elemento, todas las imagenes escalan a la vez y quisiera que solo una escalara mientras las otras se quedaran igual.
en mi Trigger coloco esto:
trigger('Esc',[
state('escalar',style({
transform: 'scale(1.5)'
})),
state('desescalar',style({
transform: 'scale(1)'
})),
transition('* => *', animate('500ms ease'))
])
y este se activa con los metodos escalar() y desescalar()
escalar(){
this.escala = 'escalar';
}
desescalar(){
this.escala = 'desescalar';
}
pero el Trigger no hace diferencia entre los elementos, asi que siempre me escala todos y me desescala todos, en un futuro esas imagenes se pondran de forma dinamica por lo que no quiero tener que hacer un Trigger para cada una, ¿existe alguna forma para que se pueda identificar que imagen se escala y cual no ?
De antemano muchas gracias por sus respuestas :)