Marcelo Puebla / autoservicio-axion

Download as
Browse Code ยป

Commit a12ccbf62d8098797bf826d6ea2bc0844e4d5c02

Authored by Marcelo Puebla
1 parent ab7cb335b7
Exists in develop

Change 

Animaciones de angular puestas en un archivo distinto
Showing 5 changed files with 31 additions and 32 deletions   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ a12ccbf
... ... @@ -24,7 +24,7 @@
24 24 <div
25 25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
26 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27   - @EnterLeave>
  27 + @EnterLeaveX>
28 28 <!-- ARTICULO -->
29 29 <div class="h-100 border border-primary rounded-sm">
30 30 <div class="row align-items-center mx-0 h-100">
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ a12ccbf
... ... @@ -2,28 +2,16 @@ import { Component, OnInit, OnDestroy, HostListener } from &#39;@angular/core&#39;;
2 2 import { Location } from '@angular/common';
3 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5   -import { trigger, state, style, transition, animate } from '@angular/animations';
6   -import { IArticulo } from 'src/app/interfaces/IArticulo';
7 5 import { Router } from '@angular/router';
8 6 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
9 7 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
  8 +import { ANIMATIONS } from 'src/app/utils/animations';
10 9  
11 10 @Component({
12 11 selector: 'app-carrito',
13 12 templateUrl: './carrito.component.html',
14 13 styleUrls: ['./carrito.component.scss'],
15   - animations: [
16   - trigger('EnterLeave', [
17   - state('flyIn', style({ transform: 'translateX(0)' })),
18   - transition(':enter', [
19   - style({ transform: 'translateX(-100%)' }),
20   - animate('1s ease-in')
21   - ]),
22   - transition(':leave', [
23   - animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
24   - ])
25   - ])
26   - ]
  14 + animations: [ANIMATIONS.EnterLeaveX]
27 15 })
28 16 export class CarritoComponent implements OnInit, OnDestroy {
29 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ a12ccbf
... ... @@ -117,7 +117,7 @@
117 117 <div
118 118 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
119 119 *ngFor="let articulo of articuloService.carrito; let i = index;"
120   - @EnterLeave>
  120 + @EnterLeaveY>
121 121 <img
122 122 class="btn-effect icon-20 mr-2 position-absolute right-0"
123 123 src="assets/img/icono-cancelar-color.svg"
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ a12ccbf
1   -import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, AfterViewInit } from '@angular/core';
  1 +import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
2 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 7 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8   -import { CategoriaService } from 'src/app/services/categoria/categoria.service';
9 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
12 11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
13   -import { trigger, state, style, transition, animate } from '@angular/animations';
14 12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
15 13 import * as _ from 'lodash';
  14 +import { ANIMATIONS } from 'src/app/utils/animations';
16 15  
17 16 @Component({
18 17 selector: 'app-seleccion-articulos',
19 18 templateUrl: './seleccion-articulos.component.html',
20 19 styleUrls: ['./seleccion-articulos.component.scss'],
21   - animations: [
22   - trigger('EnterLeave', [
23   - state('flyIn', style({ transform: 'translateY(0)' })),
24   - transition(':enter', [
25   - style({ transform: 'translateY(-100%)' }),
26   - animate('0.5s ease-in')
27   - ]),
28   - transition(':leave', [
29   - animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
30   - ])
31   - ])
32   - ]
  20 + animations: [ANIMATIONS.EnterLeaveY]
33 21 })
34 22 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
35 23 showSpinner = true;
... ... @@ -46,7 +34,6 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
46 34  
47 35 constructor(
48 36 public articuloService: ArticuloService,
49   - private categoriaService: CategoriaService,
50 37 private sinonimoService: SinonimoService,
51 38 private modalService: BsModalService,
52 39 private inactiveScreen: InactiveScreenService,
src/app/utils/animations.ts
Diff comments   View file @ a12ccbf
... ... @@ -0,0 +1,24 @@
  1 +import { trigger, state, style, transition, animate } from '@angular/animations';
  2 +
  3 +export const ANIMATIONS = {
  4 + EnterLeaveY: trigger('EnterLeaveY', [
  5 + state('flyIn', style({ transform: 'translateY(0)' })),
  6 + transition(':enter', [
  7 + style({ transform: 'translateY(-100%)' }),
  8 + animate('0.5s ease-in')
  9 + ]),
  10 + transition(':leave', [
  11 + animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
  12 + ])
  13 + ]),
  14 + EnterLeaveX: trigger('EnterLeaveX', [
  15 + state('flyIn', style({ transform: 'translateX(0)' })),
  16 + transition(':enter', [
  17 + style({ transform: 'translateX(-100%)' }),
  18 + animate('1s ease-in')
  19 + ]),
  20 + transition(':leave', [
  21 + animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
  22 + ])
  23 + ])
  24 +};