angular 2 ngIf y CSS transición/animación

Hola usuario de nuestra web, descubrimos la solución a tu búsqueda, has scroll y la obtendrás a continuación.

Solución:

actualizar 4.1.0

Plunker

Consulte también https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24

actualizar 2.1.0

Plunker

Para más detalles ver Animaciones en angular.io

import  trigger, style, animate, transition  from '@angular/animations';

@Component(
  selector: 'my-app',
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style(transform: 'translateX(100%)', opacity: 0),
          animate('500ms', style(transform: 'translateX(0)', opacity: 1))
        ]),
        transition(':leave', [
          style(transform: 'translateX(0)', opacity: 1),
          animate('500ms', style(transform: 'translateX(100%)', opacity: 0))
        ])
      ]
    )
  ],
  template: `
    toggle show (show)

    
xxx
  `
)
export class App 
  show:boolean = false;

original

*ngIf elimina el elemento del DOM cuando la expresión se convierte en false. No puede tener una transición en un elemento que no existe.

Usar en su lugar hidden:

De acuerdo con la última documentación angular 2 puedes animar elementos de “Entrar y salir” (como en el angular 1).

Ejemplo de animación de fundido simple:

En @Component relevante agregar:

animations: [
  trigger('fadeInOut', [
    transition(':enter', [   // :enter is alias to 'void => *'
      style(opacity:0),
      animate(500, style(opacity:1)) 
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(500, style(opacity:0)) 
    ])
  ])
]

No te olvides de añadir importaciones.

import style, state, animate, transition, trigger from '@angular/animations';

El elemento html del componente relevante debería verse así:

element

Construí un ejemplo de animación de diapositivas y desvanecimientosaquí.

Explicación sobre ‘void’ y ‘*’:

• void es el estado cuando ngIf se establece en false (se aplica cuando el elemento no está adjunto a una vista).
• * – Puede haber muchos estados de animación (lea más en los documentos). Él * El estado tiene prioridad sobre todos ellos como un “comodín” (en mi ejemplo, este es el estado cuando ngIf se establece en true).

darse cuenta (tomado de documentos angulares):

Extra declarar dentro del módulo de la aplicación,
import BrowserAnimationsModule from '@angular/platform-browser/animations';

Las animaciones angulares se crean sobre la API de animaciones web estándar y se ejecutan de forma nativa en los navegadores que la admiten. Para otros navegadores, se requiere un polyfill. Tome web-animations.min.js de GitHub y agréguelo a su página.

    trigger('slideIn', [
      state('*', style( 'overflow-y': 'hidden' )),
      state('void', style( 'overflow-y': 'hidden' )),
      transition('* => void', [
        style( height: '*' ),
        animate(250, style( height: 0 ))
      ]),
      transition('void => *', [
        style( height: '0' ),
        animate(250, style( height: '*' ))
      ])
    ])

valoraciones y reseñas

Puedes añadir valor a nuestra información cooperando tu experiencia en las notas.

---

---

Utiliza Nuestro Buscador