0

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 :)

1 respuesta 1

0

Para efectuar eso tienes 2 opciones:

  1. (RECOMENDADA) Crear un componente ImageScale con un @Input() que reciba la url:

    import { Component, Input } from '@angular/core';
    import {
      transition,
      trigger,
      style,
      animate,
      state,
    } from '@angular/animations';
    
    @Component({
      selector: 'app-image-scale',
      template: `<img class="img" [@Esc]='escala' (mouseover)="escalar($event)" (mouseout)="desescalar()" [(src)]="src" >`,
      animations: [
        trigger('Esc', [
          state(
            'escalar',
            style({
              transform: 'scale(1.5)',
            })
          ),
          state(
            'desescalar',
            style({
              transform: 'scale(1)',
            })
          ),
          transition('* => *', animate('500ms ease')),
        ]),
      ],
    })
    export class ImageScaleComponent {
      @Input() src = '';
      escala: string;
    
      constructor() {
      }
      escalar(event) {
        this.escala = 'escalar';
      }
    
      desescalar() {
        this.escala = 'desescalar';
      }
    }
    

Llamando desde el componente que quiera visualizar las imágenes de la siguiente manera:

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <app-image-scale [src]="'https://angular.io/assets/images/logos/angular/logo-nav@2x.png'"></app-image-scale>
  <app-image-scale [src]="'https://angular.io/assets/images/logos/angular/logo-nav@2x.png'"></app-image-scale>
  <app-image-scale [src]="'https://angular.io/assets/images/logos/angular/logo-nav@2x.png'"></app-image-scale>
</div>
  • Crear una propiedad escala por img, obligandote a setear las variables por cada escala.
1
  • 1
    gracias, no habia pasado a decirte que me sirvio mucho lo que me mostrate aqui, estoy comenzando en angular y esto me fue de mucha ayuda :D
    – Carlos
    el 25 oct. 2018 a las 16:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.