Este artigo fornecerá o procedimento para executar uma função JavaScript após uma animação CSS.
Como executar o JavaScript após a conclusão da animação CSS?
Javascript fornece o “ início da animação ”&“ animando ”Eventos que permitem ao desenvolvedor executar uma função Javascript assim que uma animação começa ou termina. Isso torna muito conveniente para os desenvolvedores realizar qualquer operação após o término da animação. A sintaxe para usar o “ animando ”O evento é o seguinte:
{ HTML elemento } . addEventListener ( 'animando' , Nome da Função ) ;
Na sintaxe fornecida acima, o “ animando ”É fornecido como o primeiro argumento para o ouvinte de evento, seguido pela função que será executada quando a animação terminar. Um ' ouvinte de eventos ”em Javascript dispara a função dada sempre que um evento específico acontece.
Vamos entender como um usuário pode executar uma função JavaScript após uma animação CSS usando a sintaxe definida acima. Nesta demonstração, uma caixa é animada para descer e subir novamente em “ quatro ”Segundos. Após a conclusão da animação, uma mensagem será exibida usando uma função JavaScript.
< HTML >
< estilo >
#meuDIV {
largura : 150 pixels ;
altura : 150 pixels ;
posição : relativo ;
fundo : luz verde ;
}
@keyframes moveBox {
0 % { principal : 0px ; }
cinquenta % { principal : 200 pixels ; fundo : rosa ; }
100 % { principal : 0px ; fundo : luz verde ; }
}
estilo >
< corpo >
< h1 > Executando JavaScript após o CSS Animação h1 >
< h3 > Clique no quadrado abaixo para iniciar a animação h3 >
< identificação do pi = 'para' p >
< ID da div = 'meuDIV' ao clicar = 'minhaFunção()' divisão >
< roteiro >
const div1 = documento. getElementById ( 'meuDIV' ) ;
const para = documento. getElementById ( 'para' ) ;
função minhaFunção ( ) {
div1. estilo . animação = 'moverBox 6s' ;
}
div1. addEventListener ( 'início de animação' , startFunção ) ;
div1. addEventListener ( 'animando' , fimFunção ) ;
função startFunction ( ) {
para. HTML interno = “A animação começou…” ;
}
função fimFunção ( ) {
para. HTML interno = 'A animação terminou!' ;
para. estilo . cor = 'vermelho' ;
}
roteiro >
corpo >
HTML >
A explicação do código acima é a seguinte:
- No '
”tags, o elemento com id“ meuDIV ”é fornecido com propriedades CSS. - A seguir, um “ quadro-chave ”nomeado“ moverBox ”é criado para fins de animação. Possui três estados de transição. A primeira transição será de “ 0% ' para ' cinquenta% ”. Então, a próxima transição será de “ cinquenta% ' para ' 100% ”.
- Então, dentro das tags body, o “ h1 ”&“ h3 ”elementos são criados.
- A ' ”elemento com id“ para ' é criado.
- A ' divisão ” elemento com o id “ meuDIV ' é criado. Além disso, uma função chamada “ minhaFunção() ”é fornecido ao“ ao clicar ”Atributo do elemento div.
- A seguir, dentro do “
” Tags, duas constantes são criadas. Essas constantes apontam para os elementos HTML usando o “ .getElementByID() ”Método. - Uma função chamada “ minhaFunção() ' é criado. Esta função irá animar o “ meuDIV ”Elemento usando o“ moverBox ”Quadros-chave.
- Em seguida, são criados dois ouvintes de eventos que chamam as funções especificadas no “ início da animação ”evento e o“ animando ”evento.
- Em seguida, são definidas duas funções para os eventos mencionados acima.
Saída:
Isso pode ser visto na saída abaixo quando o usuário clica na caixa a animação é iniciada. No processo de animação, a caixa muda, desce 200px e volta ao seu lugar original. Durante o movimento, sua cor também muda de verde para rosa e depois para verde novamente. A seguir, a mensagem “ A animação terminou! ”é exibido usando uma função Javascript que é executada após a conclusão da animação CSS.
Trata-se de executar uma função JavaScript após terminar a animação CSS.
Conclusão
Para executar uma função JavaScript após a conclusão de uma animação CSS, o usuário pode usar um ouvinte de evento. Para isso, o usuário deverá fornecer o “ animando ”evento como o primeiro argumento e uma função como o segundo argumento para o ouvinte de evento. A função especificada será executada após o término da animação. Este artigo forneceu o procedimento para executar uma função Javascript após uma animação CSS.