Transiciones

En el caso de tener muchos estados quizas puede ser tedioso combinar todas las transiciones. Por lo que vi se pueden usar el wildcards ‘*’. De esta manera si quiero hacer una transicion de any to any puedo escribirlo

transition('* => *',animate(1000))

https://angular.io/guide/animations

Codigo de la clase.

lugares.component.ts

import { Component } from '@angular/core';
import { LugaresService } from '../services/lugares.service';
import { style, trigger, state, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-lugares',
  templateUrl: './lugares.component.html',
  animations: [trigger('contenedorAnimable' ,[
    // aca empieza la animacion
    state('inicial', style({
      opacity: 0,
      backgroundColor: 'green',
      transform: 'rotate3d(0,0,0 ,0deg)'
    })),
    state('final', style({
      opacity: 1,
      backgroundColor: 'yellow',
      transform: 'rotate3d(5,10,20,30deg)'
    })),
    transition('inicial => final', animate(1000)),
    transition('final => inicial', animate(500))
    // aca termina la animacion
  ])
]
})
export class LugaresComponent {
  title = 'Square';
  state = 'inicial';
  lat:number = -34.6080556;
  lng:number = -58.3724665;
  lugares = null;
  animar(){
    this.state = (this.state === 'final') ? 'inicial' : 'final';
  }
  constructor(private lugaresService:LugaresService){
      this.lugares = lugaresService.getLugares();
    };
}

lugares.component.html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="13">
    <agm-marker *ngFor="let lugar of lugares" [latitude]="lugar.lat" [longitude]="lugar.lng"></agm-marker>
</agm-map>
<hr />
<div id="cuadrado" [@contenedorAnimable]="state"></div>
<a class="btn btn-default" (click)="animar()">Animar!</a>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h2>Lugares Cercanos</h2>
            <a class="btn btn-primary" routerLink="/crear/new">Crear Nuevo Negocio</a>
            <ul class="list-group">
                <ng-container *ngFor="let lugar of lugares">

                        <li class="list-group-item">
                            <a routerLink="/crear/{{lugar.id}}"><h3>{{lugar.nombre}}</h3></a>
                            <br />
                            <small>Creado: {{lugar.id | date:'mediumTime' | uppercase}}</small>
                            <p [innerHtml]="lugar.descripcion | linkifystr"></p>
                        </li>
                </ng-container>
            </ul>
        </div>
        <div class="col-md-4">
            <h2>Destacados</h2>
        </div>
    </div>
</div>

por si se equivocan en algo

tengo en el app module importado BrowserAnimationsModule y todo lo demás, sin embargo la animación no ocurre, estoy usando angular 8