So fügen Sie Animationseffekte zu Seitenumbrüchen hinzu

Einleitung

Möchten Sie Ihren Seitenumbrüchen in Ihren Formularen Animationseffekte hinzufügen? Standardmäßig gibt es keine Animation, wenn Sie auf einem mehrseitigen Formular von einer Seite zur nächsten wechseln. Mit JavaScript und etwas CSS können Sie jedoch eine kleine Animation hinzufügen, wenn Sie von der nächsten zur vorherigen Seite und zurück wechseln.

Erstellen Ihres Formulars

Zuerst müssen Sie Ihr mehrseitiges Formular erstellen. Wenn Sie Hilfe beim Erstellen dieser Art von Formular benötigen, lesen Sie bitte diese Dokumentation.

Hinzufügen des JavaScript-Snippets

Jetzt ist es an der Zeit, das Snippet hinzuzufügen.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

/**
 * 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 );

Dieses Snippet wird nur für die Formular-ID 406 ausgeführt. Wenn der Button Weiter oder Zurück geklickt wird, fügt das Skript dem Formularcontainer den CSS-Klassennamen anim-trans hinzu, der die CSS-Übergänge ermöglicht. Nach 2 Sekunden oder 2000 Millisekunden wird der Klassenname entfernt, damit die Animation bei jedem Klick stattfindet.

Sie müssen -406 aktualisieren, um Ihre eigene Formular-ID anzugeben. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, lesen Sie bitte dieses Tutorial.

Hinzufügen der Animationseffekte

Nachdem das Skript, das die CSS-Klasse hinzufügt, hinzugefügt wurde, können wir das CSS hinzufügen, das die Animation erstellt.

Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

.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%); }
}

Denken Sie daran, das obige CSS in Bezug auf die Formular-ID #wpforms-form-406 zu aktualisieren, um Ihre eigene Formular-ID anzugeben.

Und das ist alles! Sie haben erfolgreich Animationseffekte zu Ihrem mehrseitigen Formular hinzugefügt. Möchten Sie auch dem Formularfeld-Fokus einige CSS-Stile hinzufügen? Sehen Sie sich unseren Artikel über Hinzufügen von CSS zum Formularfeld-Fokus an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end