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

Introducción

¿Le gustaría agregar algunos efectos de animación a sus saltos de página dentro de sus formularios? Por defecto, no hay animación al pasar de una página a otra en un formulario de varias páginas. Sin embargo, usando JavaScript y algo de CSS, puede agregar una pequeña animación al pasar de la página siguiente a la página anterior y viceversa.

Creación de su formulario

Primero, necesitará crear su formulario de varias páginas. Si necesita ayuda para crear este tipo de formulario, revise esta documentación.

Agregar el fragmento de JavaScript

Ahora es el momento de agregar el fragmento.

Si necesita ayuda sobre cómo y dónde agregar fragmentos a su sitio, 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 fragmento solo se ejecutará en el ID del formulario 406. Cuando se haga clic en el botón Siguiente o Anterior, el script agregará un nombre de clase CSS 'anim-trans' al contenedor del formulario, lo que permitirá que ocurran las transiciones CSS. Después de 2 segundos o 2000 milisegundos, se eliminará el nombre de la clase para que la animación ocurra en cada clic.

Deberá actualizar el -406 para que coincida con el ID de su propio formulario. Si necesita ayuda sobre dónde encontrar el ID de su formulario, revise este tutorial.

Agregar los efectos de animación

Ahora que se ha agregado el script que agregará la clase CSS, podemos agregar el CSS que creará la animación.

Si necesita ayuda para agregar CSS a su sitio, eche 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 eso es todo! Ha agregado con éxito efectos de animación a su formulario de varias páginas. ¿Le gustaría también agregar estilos CSS al enfoque de los campos del formulario? Eche un vistazo a nuestro artículo sobre Cómo agregar CSS al enfoque de los campos del formulario.

Relacionado

Referencia de acción: wpforms_wp_footer_end