1. ¿Qué es el estado
? El estado representa el estilo del elemento que se va a mover en las diferentes etapas del movimiento. [Tutoriales relacionados recomendados: "tutorial angular"]
2. Tipos de estados
En Angular, hay tres tipos de estados: void , * , custom 
void : este estado ocurre cuando el elemento se crea en la memoria pero aún no se ha agregado al DOM o el elemento se elimina del DOM
* : el estado después de que el elemento se inserta en el árbol DOM, o es un elemento que ya está en el Estado del árbol DOM, también llamado estado predeterminado
custom : estado personalizado, el elemento está en la página de forma predeterminada y se mueve de un estado a otro, como plegar y expandir el panel.
3. Animación de entrada y salida.
La animación de entrada significa que el elemento aparece frente al usuario en forma de animación después de su creación. El estado de la animación de entrada está representado por void => * , y el alias es :enter
La animación de salida se refiere a una animación de despedida realizada antes de que se elimine el elemento. El estado de la animación de salida es * => void y el alias es :leave
1. Antes de utilizar la función de animación, debe presentar el módulo de animación, a saber, BrowserAnimationsModule
importar {BrowserAnimationsModule} desde "@angular/platform-browser/animations"
@NgModule({
importaciones: [BrowserAnimationsModule],
})
export class AppModule {} 2. Análisis de código predeterminado, tarea de eliminación de tareas pendientes y tarea de adición
<!-- Introducción de bootstrap.min.css en el archivo index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="contenedor">
<h2>Todos</h2>
<div class="grupo-formulario">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="agregar todos" />
</div>
<ul clase="lista-grupo">
<li (click)="removeItem(i)" *ngFor="dejar elemento de todos; dejar i = index" class="list-group-item">
{{ artículo }}
</li>
</ul>
</div> importar {Componente} desde "@angular/core"
@Componente({
selector: "raíz de aplicación",
URL de plantilla: "./app.component.html",
estilos: []
})
exportar clase AppComponent {
// lista de tareas pendientes: cadena[] = ["Aprender Angular", "Aprender RxJS", "Aprender NgRx"]
// agregar todo
addItem(entrada: HTMLInputElement) {
this.todos.push(entrada.valor)
entrada.valor = ""
}
// eliminar todo
eliminarItem(índice: número) {
this.todos.splice(índice, 1)
}
} 3. Crear animación.
El método de activación se usa para crear animación y
el método de transición se usa para especificar el nombre de la animación. El método de transición se usa para especificar el estado de movimiento de la animación, la animación de salida o la animación de entrada, o el estado personalizado. animación.
El método de estilo se usa para establecer el estilo correspondiente al elemento en diferentes estados.
El método de animación se usa para establecer parámetros de movimiento, como el tiempo de movimiento de la animación, eventos retrasados y formas de movimiento
@Component({
animaciones: [
//Crear animación, el nombre de la animación es diapositiva
disparador ("deslizar", [
//Especifique la animación de entrada Nota: No puede haber espacios en ambos lados de la cadena y puede haber o no espacios en ambos lados de la flecha // void => * se puede reemplazar con: enter.
transición("vacío => *", [
// Especifica el estilo del elemento antes de que ingrese style({ opacity: 0, transform: "translateY(40px)" }),
//Especifique los parámetros de estilo y movimiento del elemento después de ingresar a la escena animate(250, style({ opacity: 1, transform: "translateY(0)" }))
]),
//Especificar animación de salida// * => void se puede reemplazar con:dejar
transición("* => vacío", [
//Especifique los parámetros de estilo y movimiento del elemento después de que aparezca animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])
]
}) Nota: No es necesario especificar el estado predeterminado del elemento en la animación de entrada. Angular borrará el estado vacío como
activador del estado predeterminado ("diapositiva", [
transición(":entrar", [
estilo ({ opacidad: 0, transformación: "traducirY (40px)" }),
animar(250)
]),
transición(":dejar", [
animar(600, estilo({ opacidad: 0, transformar: "translateX(100%)" }))
])
]) Nota: Para configurar los parámetros de movimiento de la animación, debe cambiar un parámetro del método de animación a un tipo de cadena
// tiempo total de ejecución de la animación tiempo de retardo (opcional) forma de movimiento (opcional)
animate("600ms 1s easy-out", style({ opacity: 0, transform: "translateX(100%)" })) La animación de fotogramas clave se define utilizando el método keyframes .
transición(":dejar", [
animar(
600,
fotogramas clave ([
estilo ({ desplazamiento: 0.3, transformación: "translateX (-80px)" }),
estilo({ desplazamiento: 1, transformación: "translateX(100%)" })
])
)
]) Angular proporciona dos funciones de devolución de llamada relacionadas con la animación, respectivamente, cuando comienza la animación y después de que se completa.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
importar { AnimationEvent } desde "@angular/animations"
inicio (evento: evento de animación) {
consola.log(evento)
}
hecho (evento: AnimationEvent) {
consola.log(evento)
} 1. Coloque la definición de animación en un archivo separado para facilitar las llamadas a múltiples componentes.
importar {animación, fotogramas clave, estilo, transición, disparador} desde "@angular/animaciones"
exportar diapositiva constante = disparador("diapositiva", [
transición(":entrar", [
estilo ({ opacidad: 0, transformación: "traducirY (40px)" }),
animar(250)
]),
transición(":dejar", [
animar(
600,
fotogramas clave ([
estilo ({ desplazamiento: 0.3, transformación: "translateX (-80px)" }),
estilo({ desplazamiento: 1, transformación: "translateX(100%)" })
])
)
])
]) importar {diapositiva} desde "./animaciones"
@Componente({
animaciones: [diapositiva]
}) 2. Extraiga definiciones de animación específicas para facilitar múltiples llamadas de animación.
importar {animación, animación, fotogramas clave, estilo, transición, disparador, useAnimation} desde "@angular/animations"
exportar constante slideInUp = animación([
estilo ({ opacidad: 0, transformación: "traducirY (40px)" }),
animar(250)
])
exportar constante slideOutLeft = animación([
animar(
600,
fotogramas clave ([
estilo ({ desplazamiento: 0.3, transformación: "translateX (-80px)" }),
estilo({ desplazamiento: 1, transformación: "translateX(100%)" })
])
)
])
exportar diapositiva constante = disparador("diapositiva", [
transición(":enter", useAnimation(slideInUp)),
transición(":dejar", useAnimation(slideOutLeft))
]) 3. Al llamar a la animación, transfiera el tiempo total de movimiento, el tiempo de retardo y
la exportación de forma de movimiento const slideInUp = animación(
[
estilo ({ opacidad: 0, transformación: "traducirY (40px)" }),
animate("{{ duración }} {{ retraso }} {{ facilitación }}")
],
{
parámetros: {
duración: "400 ms",
retraso: "0s",
flexibilización: "facilidad"
}
}
) transición(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular proporciona query para encontrar elementos y crear animaciones para ellos.
importar {diapositiva} desde "./animaciones"
animaciones: [
deslizar,
disparador("todoAnimaciones", [
transición(":entrar", [
consulta ("h2", [
estilo ({ transformar: "traducirY (-30px)" }),
animar(300)
]),
// Consulta la animación secundaria para ejecutar query("@slide", animateChild())
])
])
] <div class="contenedor" @todoAnimations>
<h2>Todos</h2>
<ul clase="lista-grupo">
<li
@deslizar
(haga clic)="eliminarArtículo(i)"
*ngFor="dejar elemento de todos; dejar i = índice"
class="lista-elemento-grupo"
>
{{ artículo }}
</li>
</ul>
</div> De forma predeterminada, la animación principal y la animación secundaria se ejecutan en orden. La animación principal se ejecuta primero y luego la animación secundaria. Puede usar el método group para activarlo en paralelo
("todoAnimations", [
transición(":entrar", [
grupo([
consulta ("h2", [
estilo ({ transformar: "traducirY (-30px)" }),
animar(300)
]),
consulta("@slide", animateChild())
])
])
]) Angular proporciona el método escalonado para retrasar la ejecución de la animación de cada elemento por turno cuando varios elementos ejecutan la misma animación al mismo tiempo.
transición(":entrar", [
grupo([
consulta ("h2", [
estilo ({ transformar: "traducirY (-30px)" }),
animar(300)
]),
consulta("@slide", tambalear(200, animateChild()))
])
]) Nota: El método escalonado solo puede utilizar dentro del método de consulta.
Angular proporciona el método state para definir el estado.
1. Análisis de código predeterminado
<div class="container">
<div class="panel panel-predeterminado">
<div class="encabezado del panel" (clic)="alternar()">
Un marco, múltiples plataformas, móviles y de escritorio</div>
<div class="cuerpo-panel">
<p>
Utilice plantillas declarativas simples para implementar rápidamente varias funciones. Amplíe el lenguaje de la plantilla con componentes personalizados y una amplia gama de componentes existentes. Obtenga soporte para Angular en casi cualquier IDE
para obtener ayuda y comentarios instantáneos. Todo esto es para ayudarle a escribir aplicaciones hermosas, en lugar de devanarse los sesos para que el código "funcione".
</p>
<p>
Desde el prototipo hasta la implementación global, Angular puede brindarle soporte para Google
Infraestructura y tecnologías altamente escalables para aplicaciones a gran escala.
</p>
<p>
Llegue a la web hoy (y mañana) con Web Workers y renderizado del lado del servidor
La mayor velocidad posible en la plataforma. Angular le brinda un control efectivo sobre la escalabilidad. Basado en RxJS, Immutable.js y otros modelos push, puede adaptarse a requisitos de datos masivos.
</p>
<p>
Aprende a usar Angular
Cree aplicaciones y luego reutilice este código y capacidades en aplicaciones en muchas plataformas diferentes.
Web, web móvil, aplicaciones móviles, aplicaciones nativas y aplicaciones nativas de escritorio.
</p>
</div>
</div>
</div>
<estilo>
.contenedor {
margen superior: 100px;
}
.encabezado del panel {
cursor: puntero;
}
</style> importar { Componente } desde "@angular/core"
@Componente({
selector: "raíz de aplicación",
URL de plantilla: "./app.component.html",
estilos: []
})
exportar clase AppComponent {
está gastado: booleano = falso
alternar() {
this.isExpended = !this.isExpended
}
} 2. Crear
disparador de animación ("expandCollapse", [
// Utilice el método de estado para definir el estilo correspondiente al elemento de estado plegado state(
"colapsado",
estilo({
altura: 0,
desbordamiento: "oculto",
relleno superior: 0,
rellenoAbajo: 0
})
),
// Utilice el método de estado para definir el estilo correspondiente al elemento de estado expandido state("expanded", style({ height: "*", overflow: "auto" })),
// Definir la transición de la animación de expansión("collapsed => expanded", animate("400ms easy-out")),
// Definir la transición de la animación de plegado("expandido => contraído", animate("400ms easy-in"))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1. Agregue un identificador de estado a la ruta. Este identificador es el estado personalizado cuando la ruta realiza una animación
de rutas constantes: Rutas = [.
{
camino: "",
componente: componente de inicio,
pathMatch: "completo",
datos: {
animación: "uno"
}
},
{
ruta: "acerca de",
componente: Acerca del componente,
datos: {
animación: "dos"
}
},
{
ruta: "noticias",
componente: componente de noticias,
datos: {
animación: "tres"
}
}
] 2. Obtenga el identificador de estado de enrutamiento a través del objeto de socket de enrutamiento y pase el identificador a la persona que llama de la animación para permitir que la animación ejecute cuál es el estado actual que se ejecutará
<div class="routerContainer" [@routerAnimations]=" prepararRuta(salida)" > <salida-router #salida="salida"></salida-router> </div>
importar { RouterOutlet } desde "@angular/router"
exportar clase AppComponent {
prepareRoute(salida: RouterOutlet) {
devolver (
salida &&
salida.activatedRouteData &&
outlet.activatedRouteData.animación
)
}
} 3. Configure routerContainer en posicionamiento relativo y establezca sus elementos secundarios directos de primer nivel en posicionamiento absoluto
/* estilos.css */
.routerContenedor {
posición: relativa;
}
.routerContenedor > * {
posición: absoluta;
izquierda: 0;
arriba: 0;
ancho: 100%;
} 4. Crear
activador de animación ("routerAnimations", [
transición("uno => dos, uno => tres, dos => tres", [
consulta(":enter", estilo({ transformar: "translateX(100%)", opacidad: 0 })),
grupo([
consulta(
":ingresar",
animar(
"facilidad de entrada de 0,4 s",
estilo({ transformar: "translateX(0)", opacidad: 1 })
)
),
consulta(
":dejar",
animar(
"desaceleración de 0,4 s",
estilo({
transformar: "traducirX(-100%)",
Opacidad: 0
})
)
)
])
]),
transición("tres => dos, tres => uno, dos => uno", [
consulta(
":ingresar",
estilo({ transformar: "translateX(-100%)", opacidad: 0 })
),
grupo([
consulta(
":ingresar",
animar(
"facilidad de entrada de 0,4 s",
estilo({ transformar: "translateX(0)", opacidad: 1 })
)
),
consulta(
":dejar",
animar(
"desaceleración de 0,4 s",
estilo({
transformar: "traducirX(100%)",
Opacidad: 0
})
)
)
])
])
]) Para obtener más conocimientos relacionados con la programación, visite: ¡Video de programación! !
Lo anterior es ¿qué es el estatus? Obtenga más información sobre la animación en Angular. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.