Ansichtsübergänge sind animiert und nahtlose Übergänge zwischen verschiedenen Zuständen. einer Webseite oder einer Anwendung. Die Transition API ansehen wurde entwickelt, um können Sie diese Effekte einfacher und leistungsstärker möglich gewesen. Die API bietet mehrere Vorteile gegenüber vorherigen JavaScript-Ansätze, einschließlich:
- Verbesserte Nutzererfahrung:Reibungslose Übergänge und visuelle Hinweise leiten die Nutzer weiter. durch Änderungen der Benutzeroberfläche, sodass sich die Navigation natürlich und weniger aufdringlich anfühlt.
- Visuelle Kontinuität:Das Gefühl der Kontinuität zwischen Ansichten bewahren. reduziert die kognitive Belastung und hilft Nutzern, sich an der Anwendung zu orientieren.
- Leistung:Die API versucht, so wenige Ressourcen des Hauptthreads wie möglich zu verwenden. was flüssigere Animationen erzeugt.
- Moderne Ästhetik: Die verbesserten Übergänge tragen zu einer eine ansprechende Nutzererfahrung bieten.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Dieser Beitrag ist Teil einer Reihe besprechen, wie E-Commerce-Unternehmen die Website mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie einige Unternehmen die View Transition API implementiert und davon profitierten.
redBus
redBus hat schon immer versucht, die Gleichheit zwischen nativen Anzeigen und User Experiences wie möglich machen. Vor der View Transition API wurden diese dass Animationen in unseren Web-Assets herausfordernd waren. Aber mit der API haben wir es gefunden, Intuitive Übergänge zwischen mehreren User Journeys erstellen, um das Web zu optimieren App-ähnlichen Nutzererfahrung. All dies und die Leistungsvorteile machen es zu einem muss für alle Websites über eine Funktion verfügen – Amit Kumar, Senior Engineering Manager, redBus.
Das Team hat an mehreren Stellen Übergänge bei Ansichten implementiert. Hier ein Beispiel: einer Kombination aus Ein- und Einblendungsanimation auf dem Anmeldesymbol auf der Startseite. Seite.
<ph type="x-smartling-placeholder">Code
Diese Implementierung verwendet mehrereview-transition-name
und benutzerdefinierte Animationen
(scale-down
und scale-up
) view-transition-name
mit einem eindeutigen Wert verwenden
trennt die Anmeldekomponente vom Rest der Seite, um sie zu animieren
separat. Wenn Sie eine neue eindeutige view-transition-name
erstellen, wird auch ein neues
::view-transition-group
in der Pseudo-Elementstruktur (wie unten gezeigt)
Code), sodass er unabhängig vom Standardcode bearbeitet werden kann.
::view-transition-group(root)
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
Das Team verwendete Ansichtsübergänge, um eine Ausblendungsanimation hinzuzufügen, wenn der Nutzer zu einem anderen Nutzer wechselte. zwischen Produkt-Thumbnails.
Die Implementierung ist so einfach, dass wir mit
startViewTransition
sofort im Vergleich zur vorherigen Implementierung einen ohne Effekte –Andy Wihalim, Senior Software Engineer, Tokopedia.
Vorher
Nachher
Code
Der folgende Code verwendet ein React-Framework und enthält Framework-spezifischen Code.
flushSync.
Weitere Informationen zum Umsetzen der Ansicht mit Frameworks
Übergänge.
Hierbei handelt es sich um eine grundlegende Implementierung, die prüft, ob der Browser
startViewTransition
. Wenn ja, erfolgt der Übergang. Andernfalls wird die
auf das Standardverhalten eingestellt.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
Richtlinienbasar
PolicyBazaar investition hat der Branche die View Transition API für Hilfetippelemente wie und die Nutzung dieser Funktionen verbessern.
<ph type="x-smartling-placeholder">Durch die Integration von View Transitions haben wir wiederholte CSS- und JavaScript-Elemente abgeschafft. Code, der für die Verwaltung von Animationen in verschiedenen Zuständen verantwortlich ist. Dies speicherte und die Nutzererfahrung erheblich verbessert. – Aman Soni, Tech Lead, Policybazaar
Code
Der folgende Code ähnelt den vorherigen Beispielen. Sie sollten jedoch beachten,
Standardformate und -animationen von
::view-transition-old(root)
und::view-transition-new(root)
. In diesem Fall
wurde der Standardwert für animation-duration
auf 0,4 s aktualisiert.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
Bei der Verwendung der View Transition API zu beachtende Punkte
Wenn Sie mehrere Effekte für den Übergang von Ansichten auf derselben Seite verwenden, einen anderen Ansichtsübergangsnamen für jeden Effekt oder Abschnitt haben, Konflikten.
Solange ein Ansichtsübergang aktiv ist (d. h. einen Übergang), wird auf der Seite
über den Rest der Benutzeroberfläche. Der Übergang sollte also nicht ausgelöst werden, wenn der Mauszeiger darauf bewegt wird.
Das mouseLeave
-Ereignis wird unerwartet ausgelöst (wenn der tatsächliche Cursor
bewegt sich immer noch nicht).
Ressourcen
- Reibungslose und einfache Umstellungen mit der View Transition API
- Erklärung: Übergänge für MPA ansehen
- Fallstudie: Nahtlose Navigation dank Übergängen der Ansicht
- Fallstudie: Das Web kann was!? | App-ähnliche Navigation
- Interop-Vorschlag: Ansichtsübergänge in Browsern verfügbar machen
- Möchtest du einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig SPA und MPA.
Lesen Sie die anderen Artikel dieser Reihe, in denen es um E-Commerce geht.
Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte
Animationen, Pop-over, Containerabfragen und der has()
-Selektor.