Como Adicionar Efeitos de Animação às Transições de Quebra de Página

Introdução

Gostaria de adicionar efeitos de animação às suas quebras de página em seus formulários? Por padrão, não há animação ao passar de uma página para outra em um formulário de várias páginas. No entanto, usando JavaScript e algum CSS, você pode adicionar uma pequena 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, revise esta documentação.

Adicionando o trecho de JavaScript

Agora é hora de adicionar o trecho.

Se precisar de ajuda sobre como e onde adicionar trechos ao seu site, por favor, confira 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 de página Próxima ou Anterior for clicado, o script adicionará um nome de classe CSS, 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 corresponder ao seu próprio ID de formulário. Se precisar de ajuda para encontrar o ID do seu formulário, revise este tutorial.

Adicionando 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 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 também de adicionar 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 de Ação: wpforms_wp_footer_end