How to differentiate elements when animating in Angular 6?

Question

How to differentiate elements when animating in Angular 6?

Navigation

#1 by (0 votes)

0

the question is like this: I have three images placed in the html part of the Angular component

<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" >

The idea is that when you move the mouse over one of these, scale its size to 1.5 and when you return it returns to its scale to 1.

In my TypeScript I do the animation, the problem is that when I move the mouse over the element, all the images scale at once and I would like only one to scale while the others stay the same.

in my Trigger I put this:

trigger('Esc',[
  state('escalar',style({
    transform: 'scale(1.5)'
  })),
  state('desescalar',style({
    transform: 'scale(1)'
  })),
  transition('* => *', animate('500ms ease'))
])

and this is activated with the scalar () and de-escalation () methods

escalar(){
   this.escala = 'escalar';
}

desescalar(){
  this.escala = 'desescalar';
}

but the Trigger does not differentiate between the elements, so I always scale all and I desescala all, in the future those images will be put dynamically so I do not want to have to make a Trigger for each one, is there some way so that you can identify which image is scaled and which is not?

Thank you in advance for your answers :)

javascript angular angular6 angular5

asked by Carlos 17.10.2018 в 23:36

source

1 answer

error 'unable to load script from assets index.android.bundle' Modify parameter to URL

score 0 · Answer 1

To do that you have 2 options:

( RECOMMENDED ) Create an ImageScale component with an @Input () that receives the 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';
  }
}

Calling from the component you want to visualize the images as follows:

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <app-image-scale [src]="'https://angular.io/assets/images/logos/angular/[email protected]'"></app-image-scale>
  <app-image-scale [src]="'https://angular.io/assets/images/logos/angular/[email protected]'"></app-image-scale>
  <app-image-scale [src]="'https://angular.io/assets/images/logos/angular/[email protected]'"></app-image-scale>
</div>

Create a property scale by img, forcing you to set the variables for each scale.