Menambah Kesan \'Gegar\' pada Popover Log Masuk untuk Petunjuk Ralat Visual

Kadangkala, elemen reka bentuk yang halus boleh membuat perbezaan besar dalam pengalaman pengguna. Daripada memaparkan mesej ralat tradisional, kesan "gegar" pada popup log masuk memberikan petunjuk yang jelas dan segera bahawa sesuatu telah berlaku. Tutorial ini akan membimbing anda untuk melaksanakan fungsi ini menggunakan vanila JavaScript , animasi CSS dan pustaka sumber terbuka Tippy.js.

Objektif kami adalah untuk:

1. Buat popover log masuk dengan Tippy.js.
2. Tambahkan kesan "gegaran" apabila ralat berlaku.
3. Tetapkan semula animasi secara automatik sebaik sahaja gegaran tamat.

Jom selami!

---

Bahagian 1: Menyediakan Animasi Gegar dengan CSS

Kita akan mulakan dengan mentakrifkan animasi CSS boleh guna semula untuk kesan gegaran. Peraturan @keyframes di bawah meniru goncangan sebelah ke sisi:

@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;
}

• Butiran Kerangka Kunci : Sifat translate3d menggerakkan popover sedikit ke kiri dan kanan untuk mencipta kesan gegaran.
• Kelas Boleh Digunakan Semula : Menggunakan kelas goncang pada mana-mana elemen akan mencetuskan animasi.

---

Bahagian 2: Mencipta Popover Log Masuk dengan Tippy.js

Kami akan menggunakan Tippy.js untuk membuat popover log masuk boleh klik. Popover akan merangkumi:

• Medan input e-mel.
• Butang "Log Masuk".
• Pendengar acara untuk mengendalikan logik log masuk dan kesan gegaran.

Berikut ialah JavaScript teras untuk menyediakan popover:

Langkah 1: Kelas Log Masuk

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 untuk Popover : Pastikan popover sepadan dengan reka bentuk anda. Berikut ialah persediaan mudah:

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

Elemen Pencetus HTML : Tambahkan elemen pencetus pada HTML anda:

butang

<h3>
  
  
  Bahagian 4: Uji Kesan Gegaran
</h3>

<ol>
<li>Klik butang <strong>Log Masuk</strong> untuk membuka popover.</li>
<li>Masukkan e-mel yang tidak sah dan serahkan. Tonton gegaran popover, menunjukkan ralat.</li>
<li>Masukkan e-mel yang sah dan lihat tiada gegaran—berjaya!</li>
</ol>


<hr>

<h3>
  
  
  Kesimpulan: Petunjuk Ralat Mesra Pengguna
</h3>

<p>Kesan gegaran meningkatkan pengalaman pengguna dengan menawarkan penunjuk ralat yang jelas dan intuitif tanpa mengacaukan UI dengan mesej tambahan. Digabungkan dengan Tippy.js untuk popover anggun dan JS vanila untuk interaktiviti, persediaan ini bersih, berfungsi dan menarik secara visual.</p>

<p>Teruskan percubaan dan ubah suai—kerana UX yang hebat adalah mengenai butirannya!</p>

<p>Untuk mendapatkan lebih banyak petua tentang pembangunan web, lihat <strong>DailySandbox</strong> dan daftar untuk <strong>surat berita percuma</strong> kami untuk kekal di hadapan!</p>