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 suas quebras de página nos seus formulários? Por defeito, não há animação ao passar de uma página para outra num formulário com várias páginas. No entanto, utilizando JavaScript e algum CSS, pode adicionar uma pequena animação ao passar da página seguinte para a página anterior e vice-versa.

Criar o seu formulário

Primeiro, terá de criar o seu formulário com várias páginas. Se precisar de ajuda para criar este tipo de formulário, reveja esta documentação.

Adicionar o trecho de JavaScript

Agora é hora de adicionar o trecho.

Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, por favor, 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 );

Este trecho só será executado no ID do formulário 406, quando o botão da página Seguinte ou Anterior for clicado, o script adicionará um nome de classe CSS de anim-trans ao contentor do formulário 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.

Terá de atualizar o -406 para corresponder ao seu próprio ID de formulário. Se precisar de assistência sobre onde encontrar o seu ID de formulário, reveja este tutorial.

Adicionar os efeitos de animação

Agora que o script foi adicionado, 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 vista de olhos 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 é tudo! Adicionou com sucesso efeitos de animação ao seu formulário com várias páginas. Gostaria também de adicionar algum estilo CSS ao foco dos campos do formulário? Dê uma vista de olhos ao nosso artigo sobre Como Adicionar CSS ao Foco do Campo do Formulário.

Relacionado

Referência de Ação: wpforms_wp_footer_end