Como adicionar efeitos de animação às transições de quebra de página

Introdução

Gostaria de adicionar alguns efeitos de animação às quebras de página em seus formulários? Por padrão, não há animação quando você passa de uma página para outra em um formulário de várias páginas. Entretanto, usando JavaScript e CSS, você pode adicionar um pouco de animação ao passar da página seguinte para a página anterior e vice-versa.

Criando seu formulário

Primeiro, você precisará criar seu formulário de várias páginas. Se precisar de ajuda para criar esse tipo de formulário, consulte esta documentação.

Adição do snippet de JavaScript

Agora é hora de adicionar o snippet.

Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, consulte este tutorial.

/**
 * Add CSS class to trigger CSS animation on Next and Previous button clicks
 *
 * @link https://wpforms.com/developers/how-to-add-animation-effects-to-page-break-transitions/
 */
  
function wpf_dev_animation_page_break( ) {
?>
<script type="text/javascript">
	
        
	jQuery( "button.wpforms-page-button" ).click(function() {

	    //Add the CSS class anim-trans to the form with the ID of 406
            jQuery( "#wpforms-form-406" ).addClass( "anim-trans" );

	setTimeout(function()
    {
        //Remove the class after 2 seconds (2000 miliseconds)
        jQuery( "#wpforms-form-406" ).removeClass( "anim-trans" );

    }, 2000);
});
	
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_animation_page_break', 30 );

Esse snippet será executado somente no formulário ID 406. Quando o botão Próxima página ou Página anterior for clicado, o script adicionará um nome de classe CSS de anim-trans ao contêiner do formulário, o que permitirá que as transições CSS ocorram. Após 2 segundos ou 2000 milissegundos, o nome da classe é removido para que a animação ocorra a cada clique.

Você precisará atualizar o -406 para que corresponda ao seu próprio ID de formulário. Se precisar de ajuda para saber onde encontrar o ID do formulário, consulte este tutorial.

Adição de efeitos de animação

Agora que foi adicionado o script que adicionará a classe CSS, podemos adicionar o CSS que criará a animação.

Se precisar de ajuda para adicionar CSS ao seu site, dê uma olhada neste tutorial.

.transition {
  position:absolute;
  height:100%;
  width:30%;
  background:#d6d6d6;
  transform: skewX(-5deg) translateX(-50px);
  transition:2s all ease-in-out;
  -webkit-transition:2s all ease-in-out;
}

#wpforms-form-406 {
  position:relative;
  z-index:10;
  overflow: hidden;
}

button.wpforms-page-button {
  outline:none;
  border:none;
  text-decoration:none;
  text-transform:uppercase;
  background:#202020;
  color:#eaeaea;
  box-sizing:border-box;
  margin-top:20px;
  padding:10px 40px;
}

.anim-trans {
  animation: anim 2s ease-in-out;
  }

@keyframes anim{
   0% { }
  20%  { z-index:11;\transform: skewX(5deg) translateX(-100%); }
}

Lembre-se de atualizar o CSS acima em referência ao ID do formulário #wpforms-form-406 para corresponder ao seu próprio ID de formulário.

E é isso! Você adicionou com sucesso efeitos de animação ao seu formulário de várias páginas. Gostaria de adicionar também algum estilo CSS ao foco do campo do formulário? Dê uma olhada em nosso artigo sobre Como adicionar CSS ao foco do campo do formulário.

Relacionado

Referência da ação: wpforms_wp_footer_end