¿Cómo funciona la animación “Angular 2.0 for TypeScript”(alfa)?

Question

Soy muy nuevo en la escena angular. Acabo de comenzar a aprender Angular 2.0 para TypeScript y me preguntaba cómo funciona la animación (como en un HTML simple con jQuery) en Angular 2.0.

En la página de inicio de Angular 2.0 (angular.io> Características) puede ver que hay una manera de hacer animación en "Angular 2.0 para TypeScript".

En mi investigación encontré algo como esto: http://www.angular-dev.com/angular-connect-slides/#/26/0/

Pero creo que esto es solo un código JavaScript normal. Y no estoy seguro de si ngAnimate 2.0 es eso, lo que estoy buscando.

Desafortunadamente, no puedo encontrar más información sobre eso.

Lo que quiero hacer, es muy simple:

Cuando hago clic en un simple contenedor div, quiero que aparezca otro contenedor div (que en principio no es visible).

En jQuery, sería algo como esto: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

Pero lo que quiero, es esta animación en TypeScript. ¿Tienes alguna idea de cómo alcanzo este objetivo?

Gracias por sus respuestas de antemano!

EDITAR Lo siento, olvidé mencionar, qué es exactamente lo que quiero. Quiero usar el interruptor, pero algo como en Windows 10:

Cuando presionas "Windows + A", aparecerá una barra lateral en el lado derecho. Exactamente eso es lo que quiero con la animación en el sitio web, al hacer clic en un contenedor div, y no simplemente aparecer y desaparecer.

Creo que el código jQuery sería algo así (solo para aparecer con un retraso)

$("divA").click(function() {
    $("divB").toggle(1000);
});

Answer 1

Para su simple "animación" solo necesita ng-if:

<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>

Por cierto, la animación Angular 2 no está disponible todavía. La documentación de las animaciones ha aterrizado .

Answer 2

Puedes usar CSS, o AnimationBuilder

Para la forma de CSS, puedes consultar este example desde su repositorio que hace exactamente lo que estás buscando.

Con AnimationBuilder puedes simular el mismo comportamiento como este

Primero configura la plantilla que mantendrá presionado el botón y div para alternar

@Component({
  // Setting up some styles
  template: `
    <div animate-box #box="ab"  style="height:0; width:50%; overflow: hidden;">Some content</div>
    <button (click)="box.toggle(visible = !visible)">Animate</button>
  `,
  directives : [AnimateBox] // See class below
})

Luego creas la directiva que manejará la animación.

@Directive({
  selector : ''[animate-box]'',
  exportAs : ''ab'' // Necessary, we export it and we can get its ''toggle'' method in the template
})
class AnimateBox {
  constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}

  toggle(isVisible: boolean = false) {
    let animation = this._ab.css();
    animation
      .setDuration(1000); // Duration in ms

    // If is not visible, we make it slide down
    if(!isVisible) {

      animation
        // Set initial styles
        .setFromStyles({height: ''0'', width: ''50%'', overflow: ''hidden''})
        // Set styles that will be added when the animation ends
        .setToStyles({height: ''300px''})
    } 
    // If is visible we make it slide up
    else {
      animation
        .setFromStyles({height: ''300px'', width: ''50%''})
        .setToStyles({height: ''0''})
    }

    // We start the animation in the element, in this case the div
    animation.start(this._e.nativeElement);
  }
}

Referencia

• API de animación , es super simple, muy, muy simple.

Notas

Esta es una API temporal, la nueva llamada ngAnimate 2.0 aún no está disponible. Pero puede consultar las novedades de @ matsko''s talk en AngularConnect - ngAnimate 2.0 .

Aquí hay un plnkr con un repro.

Espero que ayude.