Tengo una barra lateral que estoy mostrando/ocultando usando un booleano como este:
[hidden]='toggleSidebar'
He estado tratando de encontrar la forma correcta de agregar una transición a este elemento, pero hasta ahora solo he tenido un éxito parcial con este método: [class.show]='!toggleSidebar' . Sin embargo, la aplicación de estilos css a esta clase solo funciona parcialmente.
¿Cómo agrego una animación deslizante o gradual a un elemento que contiene una salida de enrutador como esta?
<aside [hidden]="toggleSidebar"> <router-outlet name="aside"></router-outlet> </aside>Usando el atributo [hidden] simplemente no puede lograr un efecto de transición/animación ya que no hay cambios de pasos posteriores sino solo cambios de estado que reflejan que el elemento está visible u oculto.
Lo que puedes hacer es usar la opacity y visibility .
<aside class="sidebar" [style.opacity]="toggleSidebar ? '0' : '1'" [style.visibility]="toggleSidebar ? 'hidden' : 'visible'"> <router-outlet name="aside"></router-outlet> </aside>Proporcione un tiempo de transición para la barra lateral para cambios de estado.
.sidebar { transition: all .3s; } NOTA : es mejor evitar el atributo [hidden] si desea admitir Internet Explorer 9 y 10. :)
El comportamiento deseado se puede lograr con ngIf . De la guía oficial :
El estado de vacío
El estado especial llamado void puede aplicarse a cualquier animación. Se aplica cuando el elemento no está adjunto a una vista, quizás porque aún no se ha agregado o porque se ha eliminado. El estado de vacío es útil para definir animaciones de entrada y salida.
En el siguiente ejemplo, div aparece desde la parte superior de la pantalla cuando la condición se evalúa como verdadera.
HTML:
<div *ngIf="panelVisible" [@panelInOut]>....</div>
TS:
@Component({ .... animations: [ trigger('panelInOut', [ transition('void => *', [ style({transform: 'translateY(-100%)'}), animate(800) ]), transition('* => void', [ animate(800, style({transform: 'translateY(-100%)'})) ]) ]) ] })