Hinzufügen eines „Schütteln'-Effekts zu Anmelde-Popovers für einen visuellen Fehlerhinweis

Manchmal können subtile Designelemente einen großen Unterschied in der Benutzererfahrung machen. Anstatt herkömmliche Fehlermeldungen anzuzeigen, liefert ein „Schütteln“-Effekt bei einem Anmelde-Popover einen klaren und unmittelbaren Hinweis darauf, dass etwas schief gelaufen ist. Dieses Tutorial führt Sie durch die Implementierung dieser Funktionalität mit Vanilla JavaScript, CSS-Animationen und der Open-Source-Bibliothek Tippy.js.

Unser Ziel ist:

1. Erstellen Sie ein Login-Popover mit Tippy.js.
2. Fügen Sie den „Rütteleffekt“ hinzu, wenn Fehler auftreten.
3. Die Animation wird automatisch zurückgesetzt, sobald der Shake endet.

Lass uns eintauchen!

---

Teil 1: Einrichten der Shaking-Animation mit CSS

Wir beginnen mit der Definition einer wiederverwendbaren CSS-Animation für den Shake-Effekt. Die folgende @keyframes-Regel ahmt ein seitliches Schütteln nach:

@keyframes shaking {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
.shake {
    animation: shaking 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

• Keyframe-Details: Die Translate3d-Eigenschaft verschiebt das Popover leicht nach links und rechts, um den Schütteleffekt zu erzeugen.
• Wiederverwendbare Klasse: Das Anwenden der Shake-Klasse auf ein beliebiges Element löst die Animation aus.

---

Teil 2: Erstellen des Login-Popovers mit Tippy.js

Wir verwenden Tippy.js, um ein anklickbares Login-Popover zu erstellen. Das Popover enthält Folgendes:

• Ein E-Mail-Eingabefeld.
• Eine Schaltfläche „Anmelden“.
• Ereignis-Listener zur Handhabung der Anmeldelogik und des Shake-Effekts.

Hier ist das Kern-JavaScript zum Einrichten des Popovers:

Schritt 1: Der Anmeldekurs

APP.Signin = class {
    constructor($target) {
        this.values = {}; // Store any required state
        if ($target) this.$target = $target; // The DOM element triggering the popover
        this.init(); // Initialize the popover
        return this;
    }

    // Trigger the shake animation
    shake() {
        this.$tippy.classList.add('shake');
        return this;
    }

    // Handle Sign-In button clicks
    onSigninClicked(event) {
        event.preventDefault();

        // Retrieve the entered email
        let email = document.querySelector('.app-signin-email').value;

        // Error and success handlers
        let _onError = () => this.shake();
        let _onSuccess = (response) => {
            if (response.errors.length) {
                this.shake(); // Shake on error
            } else {
                // Handle successful login
                console.log('Login successful!');
            }
        };

        // Simulate a backend login request
        let form_data = new FormData();
        form_data.append('method', 'quickSignIn');
        form_data.append('email', email);

        axios({
            method: 'POST',
            url: 'path/to/server',
            data: form_data,
            headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
        })
            .then((response) => (typeof response.data === 'string' ? JSON.parse(response.data) : response.data))
            .then(_onSuccess)
            .catch(_onError);
    }

    // Define the HTML content of the popover
    getContent() {
        return `
            <div>




<hr>

<p><strong>2228+ FREE</strong> <u><b><strong>RESOURCES</strong></b></u> <strong>FOR DEVELOPERS!! ❤️</strong> ?? <strong><sub><strong>(updated daily)</strong></sub></strong></p>

<blockquote>
<p>1400+ Free HTML Templates<br><br>
359+ Free News Articles<br><br>
69+ Free AI Prompts<br><br>
323+ Free Code Libraries<br><br>
52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!<br><br>
25+ Free Open Source Icon Libraries</p>
</blockquote>

<p>Visit dailysandbox.pro for free access to a treasure trove of resources!</p>


<hr>

<h3>
  
  
  Part 3: Wiring It All Together
</h3>

<p><strong>Simulated Backend</strong> : If you don’t have a real server, mock responses with a promise:<br>
</p>

<pre class="brush:php;toolbar:false">const mockServer = (email) =>
    new Promise((resolve, reject) => {
        setTimeout(() => {
            if (email === 'test@email.com') resolve({ errors: [] });
            else reject({ errors: ['Invalid email'] });
        }, 500);
    });

CSS für das Popover: Stellen Sie sicher, dass das Popover zu Ihrem Design passt. Hier ist eine einfache Einrichtung:

.app-signin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-signin-email {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.app-signin-btn {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.app-signin-btn:hover {
    background-color: #0056b3;
}

HTML-Triggerelement: Fügen Sie Ihrem HTML ein Triggerelement hinzu:

<schaltfl>




<hr>

<h3>
  
  
  Teil 4: Testen Sie den Schütteleffekt
</h3>

<ol>
<li>Klicken Sie auf die Schaltfläche <strong>Anmelden</strong>, um das Popover zu öffnen.</li>
<li>Geben Sie eine ungültige E-Mail-Adresse ein und senden Sie sie ab. Beobachten Sie, wie das Popover wackelt, was auf einen Fehler hinweist.</li>
<li>Geben Sie eine gültige E-Mail-Adresse ein und Sie sehen kein Wackeln – Erfolg!</li>
</ol>


<hr>

<h3>
  
  
  Fazit: Ein benutzerfreundlicher Fehlerhinweis
</h3>

<p>Der Schütteleffekt verbessert das Benutzererlebnis, indem er eine klare, intuitive Fehleranzeige bietet, ohne die Benutzeroberfläche mit zusätzlichen Meldungen zu überladen. In Kombination mit Tippy.js für ein elegantes Popover und Vanilla JS für Interaktivität ist dieses Setup sauber, funktional und optisch ansprechend.</p>

<p>Experimentieren und optimieren Sie weiter – denn bei großartigem UX kommt es auf die Details an!</p>

<p>Weitere Tipps zur Webentwicklung finden Sie unter <strong>DailySandbox</strong> und abonnieren Sie unseren <strong>kostenlosen Newsletter</strong>, um immer auf dem Laufenden zu bleiben!</p>


          </schaltfl>