Cómo añadir efectos de animación a las transiciones de salto de página

Introducción

¿Le gustaría añadir efectos de animación a los saltos de página de sus formularios? Por defecto, no hay animación cuando pasas de una página a otra en un formulario multipágina. Sin embargo, usando JavaScript y algo de CSS puedes añadir una pequeña animación al pasar de la página siguiente a la anterior y viceversa.

Creación del formulario

En primer lugar, tendrás que crear tu formulario multipágina. Si necesitas ayuda para crear este tipo de formulario, revisa esta documentación.

Añadir el fragmento de JavaScript

Ahora es el momento de añadir el fragmento.

Si necesitas ayuda sobre cómo y dónde añadir snippets a tu sitio, consulta 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 fragmento sólo se ejecutará en el formulario ID 406, cuando se haga clic en el botón Siguiente o Página anterior, el script añadirá un nombre de clase CSS de anim-trans al contenedor del formulario que permitirá que se produzcan las transiciones CSS. Después de 2 segundos o 2000 milisecons, el nombre de la clase es removido para que la animación suceda en cada click.

Tendrá que actualizar el -406 para que coincida con su propio ID de formulario. Si necesita ayuda para encontrar su ID de formulario, consulte este tutorial.

Añadir los efectos de animación

Ahora que se ha añadido el script que añadirá la clase CSS, podemos añadir el CSS que creará la animación.

Si necesitas ayuda para añadir CSS a tu sitio, echa un vistazo a este 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%); }
}

Recuerde actualizar el CSS anterior en referencia al ID del formulario #wpforms-form-406 para que coincida con el ID de su propio formulario.

Y ¡listo! Has añadido con éxito efectos de animación a tu formulario multipágina. ¿Le gustaría también añadir algún estilo CSS al campo de formulario? Echa un vistazo a nuestro artículo sobre Cómo añadir CSS al campo de formulario.

Relacionado

Acción de referencia: wpforms_wp_footer_end