Flow-Animationsübergänge

Mit der Flow-Animations-Transition können Sie konfigurieren, wie die Fragen von einer zur anderen übergehen sollen. Da ngSurvey für seine Transitionen einfache CSS-Animationsfunktionen verwendet, können Sie diese sehr leicht erweitern, um eigene Animationen zu integrieren,

Im Folgenden finden Sie Beispiele der standardmäßigen Übergangsanimationen, die in ngSurvey integriert sind. Um festzulegen, welche Animationen für Ihre Transitionen verwendet werden sollen, müssen Sie die Questions transition CSS-Eigenschaft in Ihrem festlegen Umfrageeigenschaften.

Um neu erstellte CSS-Transitions zu speichern und in Ihrer Umfrage verwenden zu können, müssen Sie diese zu Ihrem hinzufügen Theme-Style-CSS.

🏃 Wie funktioniert es?

Um Transitionen zu handhaben, fügt ngSurvey je nach aktueller Anzeigeordnung die folgenden CSS-Klassen zu den Fragen Ihrer Umfrage hinzu. Sobald der Befragte zur nächsten oder vorherigen Frage wechselt, ändert ngSurvey die CSS-Klasse und löst die CSS-Transition zwischen den Klassen aus.

Das ngs-survey__flow-section--visible CSS-Klasse wird auf die aktuell sichtbare Frage angewendet, die vorherige Frage erhält ihre CSS-Klasse gesetzt auf ngs-survey__flow-section--previous und die nächste Frage erhält ihre CSS-Klasse gesetzt auf ngs-survey__flow-section--next.

⌛ CSS-Transitions

Standardmäßig setzt ngSurvey die folgenden CSS-Transition-Eigenschaften beim Wechseln der CSS-Klassen. Wenn Sie das Timing ändern oder zusätzliche Transition-Eigenschaften für eigene Animationen hinzufügen möchten, können Sie die CSS-Klasse unten anpassen und zu Ihrem hinzufügen Theme-Style-CSS.

.ngs-survey__flow-section {
    transition: transform .5s ease 0s,opacity .4s ease 0s;    
}

🖼️ Vertikale (oben nach unten) Transition

Um diese Transition zu verwenden, würden Sie die Question CSS-Eigenschaft auf: vertical setzen

.vertical.ngs-survey__flow-section--visible
{
 opacity:1
}

.vertical.ngs-survey__flow-section--previous
{
 transform:translateY(-50vh) translateZ(0);
 opacity:0
}

.vertical.ngs-survey__flow-section--next
{
 transform:translateY(100vh) translateZ(0);
 opacity:0
}

🖼️ Horizontale (links nach rechts) Transition

Um diese Transition zu verwenden, würden Sie die Question CSS-Eigenschaft auf: horizontal setzen

.horizontal.ngs-survey__flow-section--visible
{
 opacity:1
}

.horizontal.ngs-survey__flow-section--previous
{
 transform:translateX(-50vh) translateZ(0);
 opacity:0
}

.horizontal.ngs-survey__flow-section--next
{
 transform:translateX(100vh) translateZ(0);
 opacity:0
}

🖼️ Ein-/Ausblenden (Fade in/out) Transition

Um diese Transition zu verwenden, würden Sie die Question CSS-Eigenschaft auf: fadein setzen

.fadein.ngs-survey__flow-section--visible
{
 opacity:1
}

.fadein.ngs-survey__flow-section--previous
{
 opacity:0
}

.fadein.ngs-survey__flow-section--next
{
 opacity:0
}