/**
 *  reference: http://www.bennadel.com/blog/3141-styling-the-void-state-using-animations-in-angular-2-rc-6.htm
 **/ import { animate } from "@angular/core" ; import { Component } from "@angular/core" ; import { state } from "@angular/core" ; import { style } from "@angular/core" ; import { transition } from "@angular/core" ; import { trigger } from "@angular/core" ; @ Component ( { selector : "AnimateBox" , styles : [ `
            my-app {
                display: block ;
            }
            
            a {
                color: red ;
                cursor: pointer ;
                text-decoration: underline ;
                user-select: none ;
                    -moz-user-select: none ;
                    -webkit-user-select: none ;
            }
            
            div.container {
                border: 1px solid #CCCCCC ;
                border-radius: 4px 4px 4px 4px ;
                height: 300px ;
                width: 500px ;
                position: relative ;
            }
            
            div.box {
                background-color: #262626 ;
                border-radius: 4px 4px 4px 4px ;
                color: #FFFFFF ;
                font-size: 20px ;
                height: 100px ;
                left: 50% ;
                line-height: 100px ;
                margin: -50px 0px 0px -50px ;
                position: absolute ;
                text-align: center ;
                top: 50% ;
                width: 100px ;
            }
    ` ] , animations : [ trigger ( "boxAnimation" , [ state ( "void" , style ( { borderRadius : 50 , opacity : 0.0 , transform : "rotate( 900deg )" } ) ) , state ( "*" , style ( { borderRadius : 4 , opacity : 1.0 , transform : "rotate( 0deg )" } ) ) , transition ( "void => * , * => void" , [ animate ( "1000ms ease-in-out" ) ] ) ] ) ] , template : `
		<p>
			<a (click)="removeBox()">Remove Box</a>
		</p>

        <!-- ng-container will not create any unnecessary dom elements -->
		<ng-container class="container">
			<div *ngIf="isShowingBox">
				<div @boxAnimation class="box">
					Box
				</div>

			</div>
		</ng-container>
	` } ) export class AnimateBox { public isShowingBox : boolean ; constructor ( ) { this . isShowingBox = true ; } public removeBox ( ) { this . isShowingBox = false ; setTimeout ( ( ) : void => { this . isShowingBox = true ; } , 2000 ) ; } }