browseranimationsmodule - animaciones en angular
Angular(4, 5, 6, 7)-Ejemplo simple de animación deslizable hacia afuera en ngIf (3)
¿Cuál es el mínimo y la forma nativa de Angular4 de deslizar y deslizar un elemento contenedor?
p.ej
<div ngIf="show">
<!-- Content -->
</div>
Deslice el contenido (de arriba a abajo como jQuery. slideDown ()) cuando el programa se vuelva verdadero .
Deslice el contenido hacia afuera (adecuadamente con un efecto de facilidad de salida) cuando el programa se vuelva falso .
En realidad, la cantidad mínima de Angular que se utilizará (como se solicitó en la pregunta original) es simplemente agregar una clase al elemento DOM cuando la variable show es verdadera y realizar la animación / transición a través de CSS.
Así que tu código angular mínimo es este:
<div class="box-opener" (click)="show = !show">
Open/close the box
</div>
<div class="box" [class.opened]="show">
<!-- Content -->
</div>
Con esta solución, necesita crear reglas CSS para la transición, algo como esto:
.box {
background-color: #FFCC55;
max-height: 0px;
overflow-y: hidden;
transition: ease-in-out 400ms max-height;
}
.box.opened {
max-height: 500px;
transition: ease-in-out 600ms max-height;
}
Si tiene problemas de compatibilidad con el navegador retro, recuerde agregar los prefijos del proveedor en las transition .
Vea el ejemplo aquí
Primero un código, luego la explicación. Los documentos oficiales que describen esto están here .
import { trigger, transition, animate, style } from ''@angular/animations''
@Component({
...
animations: [
trigger(''slideInOut'', [
transition('':enter'', [
style({transform: ''translateY(-100%)''}),
animate(''200ms ease-in'', style({transform: ''translateY(0%)''}))
]),
transition('':leave'', [
animate(''200ms ease-in'', style({transform: ''translateY(-100%)''}))
])
])
]
})
En su plantilla:
<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of ''visible'' changes from true to false and vice versa.</div>
Encontré la forma angular un poco difícil de entender, pero una vez que lo entiendes, es bastante fácil y poderoso.
Las animaciones parten en lenguaje humano:
- Estamos nombrando esta animación ''slideInOut''.
- Cuando se agrega el elemento (: enter), hacemos lo siguiente:
- -> Mueva inmediatamente el elemento 100% hacia arriba (desde sí mismo) para que aparezca fuera de la pantalla.
-> luego anima el valor de traslación hasta que estemos en 0%, donde el elemento sería naturalmente.
Cuando se elimina el elemento, anime el valor de traducción Y (actualmente 0), a -100% (fuera de la pantalla).
La función de aceleración que estamos utilizando es la facilidad de uso, en 200 milisegundos, puede cambiarla a su gusto.
¡Espero que esto ayude!
Respondí una pregunta muy similar, y aquí hay una manera de hacer esto:
Primero, crea un archivo donde definirías tus animaciones y las exportarías. Solo para que quede más claro en tu app.component.ts
En el siguiente ejemplo, usé una altura máxima del div que va desde 0px (cuando está oculto) hasta 500px, pero cambiarías eso de acuerdo con lo que necesites.
Esta animación utiliza estados (de entrada y salida), que se activarán cuando hagamos clic en el botón, que ejecutará la animación.
animaciones.ts
import { trigger, state, style, transition,
animate, group, query, stagger, keyframes
} from ''@angular/animations'';
export const SlideInOutAnimation = [
trigger(''slideInOut'', [
state(''in'', style({
''max-height'': ''500px'', ''opacity'': ''1'', ''visibility'': ''visible''
})),
state(''out'', style({
''max-height'': ''0px'', ''opacity'': ''0'', ''visibility'': ''hidden''
})),
transition(''in => out'', [group([
animate(''400ms ease-in-out'', style({
''opacity'': ''0''
})),
animate(''600ms ease-in-out'', style({
''max-height'': ''0px''
})),
animate(''700ms ease-in-out'', style({
''visibility'': ''hidden''
}))
]
)]),
transition(''out => in'', [group([
animate(''1ms ease-in-out'', style({
''visibility'': ''visible''
})),
animate(''600ms ease-in-out'', style({
''max-height'': ''500px''
})),
animate(''800ms ease-in-out'', style({
''opacity'': ''1''
}))
]
)])
]),
]
Luego, en su app.component, importamos la animación y creamos el método que cambiará el estado de la animación.
app.component.ts
import { SlideInOutAnimation } from ''./animations'';
@Component({
...
animations: [SlideInOutAnimation]
})
export class AppComponent {
animationState = ''in'';
...
toggleShowDiv(divName: string) {
if (divName === ''divA'') {
console.log(this.animationState);
this.animationState = this.animationState === ''out'' ? ''in'' : ''out'';
console.log(this.animationState);
}
}
}
Y aquí es cómo se vería tu app.component.html :
<div class="wrapper">
<button (click)="toggleShowDiv(''divA'')">TOGGLE DIV</button>
<div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
THIS DIV IS ANIMATED</div>
<div class="content">THIS IS CONTENT DIV</div>
</div>
slideInOut se refiere al disparador de animación definido en animations.ts
Aquí hay un ejemplo de StackBlitz que he creado: https://angular-muvaqu.stackblitz.io/
Nota al margen : si alguna vez se produce un error y le pide que agregue BrowserAnimationsModule , simplemente impórtelo en su app.module.ts:
import { BrowserAnimationsModule } from ''@angular/platform-browser/animations'';
@NgModule({
imports: [ ..., BrowserAnimationsModule ],
...
})