1. Qual é o estado
? O estado representa o estilo do elemento a ser movido nas diferentes fases do movimento. [Tutoriais relacionados recomendados: "tutorial angular"]
2. Tipos de estados
Em Angular, existem três tipos de estados: void , * , custom 
void : Este estado ocorre quando o elemento é criado na memória, mas ainda não foi adicionado ao DOM ou o elemento é removido do DOM
* : O estado após o elemento ser inserido na árvore do DOM, ou é um elemento já na Estado da árvore DOM, também chamado de estado padrão
custom : estado personalizado, o elemento está na página por padrão e se move de um estado para outro, como dobrar e expandir o painel.
3. Animação de entrada e saída
Animação de entrada significa que o elemento aparece na frente do usuário na forma de animação após ser criado. O estado da animação de entrada é representado por void => * e o alias é :enter
A animação de saída refere-se a uma animação de despedida realizada antes do elemento ser excluído. O status da animação de saída é * => void e o alias é :leave
1. Antes de usar a função de animação, você precisa apresentar o módulo de animação, ou seja, BrowserAnimationsModule
importar { BrowserAnimationsModule } de "@angular/platform-browser/animations"
@NgModule({
importações: [BrowserAnimationsModule],
})
export class AppModule {} 2. Análise de código padrão, tarefa de exclusão de tarefas e adição de tarefas
<!-- Apresentando bootstrap.min.css no arquivo index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
<h2>Todos</h2>
<div class="form-group">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="adicionar todos" />
</div>
<ul class="grupo-lista">
<li (click)="removeItem(i)" *ngFor="let item de todos; let i = index" class="list-group-item">
{{item}}
</li>
</ul>
</div> importe {Componente} de "@angular/core"
@Componente({
seletor: "app-root",
templateUrl: "./app.component.html",
estilos: []
})
classe de exportação AppComponent {
// lista de tarefas todos: string[] = ["Aprenda Angular", "Aprenda RxJS", "Aprenda NgRx"]
//adiciona tarefas
addItem(entrada: HTMLInputElement) {
this.todos.push(entrada.valor)
entrada.valor = ""
}
//Exclui todo
removeItem(índice: número) {
this.todos.splice(índice, 1)
}
} 3. Criar animação.
O método trigger é usado para criar animação, e
o método de transição é usado para especificar o nome da animação. O método de transição é usado para especificar o estado de movimento da animação, animação de saída ou animação de entrada ou estado personalizado. animação.
O método style é usado para definir o estilo correspondente ao elemento em diferentes estados.
O método animate é usado para definir parâmetros de movimento, como tempo de movimento da animação, eventos atrasados e formas de movimento
@Component({).
animações: [
//Cria animação, o nome da animação é slide
trigger("deslizar", [
//Especifique a animação de entrada. Nota: Não pode haver espaços em ambos os lados da string e pode ou não haver espaços em ambos os lados da seta // void => * pode ser substituído por: enter.
transição("void => *", [
// Especifique o estilo do elemento antes de entrar em style({ opacity: 0, transform: "translateY(40px)" }),
//Especifique os parâmetros de estilo e movimento do elemento após entrar na cena animate(250, style({ opacity: 1, transform: "translateY(0)" }))
]),
//Especifique a animação de saída// * => void pode ser substituído por:leave
transição("* => vazio", [
//Especifique os parâmetros de estilo e movimento do elemento depois que ele aparecer animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
])
])
]
}) Nota: Você não precisa especificar o estado padrão do elemento na animação de entrada. Angular limpará o estado void como o
gatilho de estado padrão ("slide", [.
transição(":enter", [
estilo({opacidade: 0, transformação: "translateY(40px)" }),
animar(250)
]),
transição(":sair", [
animate(600, style({ opacidade: 0, transform: "translateX(100%)" }))
])
]) Nota: Para definir os parâmetros de movimento da animação, você precisa alterar um parâmetro do método animate para um tipo string
// tempo total de execução da animação tempo de atraso (opcional) forma de movimento (opcional)
animate("600ms 1s atenuação", style({ opacity: 0, transform: "translateX(100%)" })) A animação de quadro-chave é definida usando o método keyframes
transição(":sair", [
animar(
600,
quadros-chave ([
estilo({deslocamento: 0,3, transformação: "translateX(-80px)" }),
estilo({deslocamento: 1, transformação: "translateX(100%)" })
])
)
]) Angular fornece duas funções de retorno de chamada relacionadas à animação, respectivamente quando a animação começa e após a animação ser concluída.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
importar { AnimationEvent } de "@angular/animations"
start(evento: AnimationEvent) {
console.log(evento)
}
concluído(evento: AnimationEvent) {
console.log(evento)
} 1. Coloque a definição da animação em um arquivo separado para facilitar chamadas de múltiplos componentes.
importar {animar, quadros-chave, estilo, transição, gatilho} de "@angular/animations"
exportar const slide = trigger("slide", [
transição(":enter", [
estilo({opacidade: 0, transformação: "translateY(40px)" }),
animar(250)
]),
transição(":sair", [
animar(
600,
quadros-chave ([
estilo({deslocamento: 0,3, transformação: "translateX(-80px)" }),
estilo({deslocamento: 1, transformação: "translateX(100%)" })
])
)
])
]) importar { slide } de "./animations"
@Componente({
animações: [slide]
}) 2. Extraia definições específicas de animação para facilitar múltiplas chamadas de animação.
importe {animar, animação, quadros-chave, estilo, transição, gatilho, useAnimation} de "@angular/animations"
exportar const slideInUp = animação([
estilo({opacidade: 0, transformação: "translateY(40px)" }),
animar (250)
])
exportar const slideOutLeft = animação([
animar(
600,
quadros-chave ([
estilo({deslocamento: 0,3, transformação: "translateX(-80px)" }),
estilo({deslocamento: 1, transformação: "translateX(100%)" })
])
)
])
exportar const slide = trigger("slide", [
transição(":enter", useAnimation(slideInUp)),
transição(":sair", useAnimation(slideOutLeft))
]) 3. Ao chamar a animação, transfira o tempo total de movimento, o tempo de atraso e a forma de movimento
export const slideInUp = Animation(
[
estilo({opacidade: 0, transformação: "translateY(40px)" }),
animate("{{ duração }} {{ atraso }} {{ easing }}")
],
{
parâmetros: {
duração: "400ms",
atraso: "0s",
atenuação: "aliviar"
}
}
) transição(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular fornece query para encontrar elementos e criar animações para eles
importar {slide} de "./animations"
animações: [
deslizar,
trigger("todoAnimações", [
transição(":enter", [
consulta("h2", [
estilo({transformação: "translateY(-30px)" }),
animar (300)
]),
// Consulta a animação filha para executar query("@slide", animateChild())
])
])
] <div class="container" @todoAnimations>
<h2>Todos</h2>
<ul class="grupo-lista">
<li
@deslizar
(clique)="removerItem(i)"
*ngFor="let item de todos; let i = index"
class="lista-grupo-item"
>
{{item}}
</li>
</ul>
</div> Por padrão, a animação pai e a animação filho são executadas em ordem. A animação pai é executada primeiro e, em seguida, a animação filho é executada. Você pode usar o método group para torná-la um
gatilho paralelo ("todoAnimations", [.
transição(":enter", [
grupo([
consulta("h2", [
estilo({transformação: "translateY(-30px)" }),
animar (300)
]),
query("@slide", animateChild())
])
])
]) Angular fornece o método escalonado para atrasar a execução da animação de cada elemento quando vários elementos executam a mesma animação ao mesmo tempo.
transição(":enter", [
grupo([
consulta("h2", [
estilo({transformação: "translateY(-30px)" }),
animar (300)
]),
query("@slide", escalonar(200, animateChild()))
])
]) Nota: O método stagger só pode usar dentro do método de consulta.
Angular fornece o método state para definir o estado.
1. Análise de código padrão
<div class="container">
<div class="painel painel-default">
<div class="panel-heading" (click)="toggle()">
Uma estrutura, múltiplas plataformas, dispositivos móveis e desktop</div>
<div class="painel-body">
<p>
Use modelos declarativos simples para implementar rapidamente vários recursos. Amplie a linguagem do modelo com componentes personalizados e uma ampla variedade de componentes existentes. Obtenha suporte para Angular em praticamente qualquer IDE
para ajuda e feedback instantâneos. Tudo isso é para ajudá-lo a escrever aplicativos bonitos, em vez de quebrar a cabeça para fazer o código "funcionar".
</p>
<p>
Do protótipo à implantação global, Angular pode oferecer suporte ao Google
Infraestrutura e tecnologias altamente escaláveis para aplicações de grande escala.
</p>
<p>
Acesse a web hoje (e amanhã) com Web Workers e renderização no servidor
A maior velocidade alcançável na plataforma. Angular oferece controle eficaz sobre a escalabilidade. Baseado em RxJS, Immutable.js e outros modelos push, ele pode se adaptar a enormes requisitos de dados.
</p>
<p>
Aprenda a usar Angular
Crie aplicativos e reutilize esses códigos e recursos em aplicativos em muitas plataformas diferentes -
Web, web móvel, aplicativos móveis, aplicativos nativos e aplicativos nativos de desktop.
</p>
</div>
</div>
</div>
<estilo>
.contêiner {
margem superior: 100px;
}
.cabeçalho do painel {
cursor: ponteiro;
}
</style> importe {Componente} de "@angular/core"
@Componente({
seletor: "app-root",
templateUrl: "./app.component.html",
estilos: []
})
classe de exportação AppComponent {
isExpended: booleano = falso
alternar() {
this.isExpended = !this.isExpended
}
} 2. Crie
um gatilho de animação ("expandCollapse", [
// Use o método state para definir o estilo correspondente ao elemento de estado dobrado state(
"colapsado",
estilo({
altura: 0,
estouro: "oculto",
preenchimentoTopo: 0,
preenchimentoInferior: 0
})
),
// Use o método state para definir o estilo correspondente ao elemento de estado expandido state("expanded", style({ height: "*", overflow: "auto" })),
// Define a animação de expansão transição("collapsed => expandido", animate("400ms facilidade")),
// Define a transição da animação dobrável("expanded => Collapsed", animate("400ms easy-in"))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1. Adicione um identificador de status à rota. Este identificador é o estado personalizado quando a rota executa a animação de
rotas const: Routes = [.
{
caminho: "",
componente: HomeComponent,
pathMatch: "completo",
dados: {
animação: "um"
}
},
{
caminho: "sobre",
componente: AboutComponent,
dados: {
animação: "dois"
}
},
{
caminho: "notícias",
componente: NewsComponent,
dados: {
animação: "três"
}
}
] 2. Obtenha o identificador de status de roteamento por meio do objeto de soquete de roteamento e passe o identificador para o chamador da animação para permitir que a animação execute qual é o estado atual a ser executado
<div class="routerContainer" [@routerAnimations]=" prepareRoute(saída)" > <router-outlet #outlet="outlet"></router-outlet> </div>
importe { RouterOutlet } de "@angular/router"
classe de exportação AppComponent {
prepareRoute(saída: RouterOutlet) {
retornar (
tomada &&
outlet.activatedRouteData &&
outlet.activatedRouteData.animation
)
}
} 3. Defina routerContainer para posicionamento relativo e defina seus elementos filhos diretos de primeiro nível para posicionamento absoluto
/* estilos.css */
.routerContainer {
posição: relativa;
}
.routerContainer > * {
posição: absoluta;
esquerda: 0;
superior: 0;
largura: 100%;
} 4. Crie
um gatilho de animação ("routerAnimations", [
transição("um => dois, um => três, dois => três", [
query(":enter", estilo({ transform: "translateX(100%)", opacidade: 0 })),
grupo([
consulta(
":digitar",
animar(
"facilidade de 0,4s",
estilo({transformação: "translateX(0)", opacidade: 1 })
)
),
consulta(
":deixar",
animar(
"0,4s de atenuação",
estilo({
transformar: "traduzirX(-100%)",
Opacidade: 0
})
)
)
])
]),
transição("três => dois, três => um, dois => um", [
consulta(
":digitar",
estilo({transformação: "translateX(-100%)", opacidade: 0 })
),
grupo([
consulta(
":digitar",
animar(
"facilidade de 0,4s",
estilo({transformação: "translateX(0)", opacidade: 1 })
)
),
consulta(
":deixar",
animar(
"0,4s de atenuação",
estilo({
transformar: "traduzirX(100%)",
Opacidade: 0
})
)
)
])
])
]) Para mais conhecimentos relacionados à programação, visite: Vídeo de Programação! !
O acima é o que é status? Saiba mais sobre animação em Angular. Para mais informações, preste atenção a outros artigos relacionados no site PHP chinês!