有時，微妙的設計元素可以對用戶體驗產(chǎn)生巨大的影響。登錄彈出窗口上的“搖動”效果不是顯示傳統(tǒng)的錯誤消息，而是提供了明確且立即的指示，表明出現(xiàn)了問題。本教程將指導您使用 vanilla JavaScript 、 CSS 動畫 和開源庫 Tippy.js.

我們的目標是：

1. 使用 Tippy.js 創(chuàng)建登錄彈出窗口。
2. 添加錯誤發(fā)生時的“搖晃”效果。
3. 搖晃結束后自動重置動畫。

讓我們開始吧！

第 1 部分：使用 CSS 設置搖動動畫

我們首先為搖動效果定義一個可重用的 CSS 動畫。下面的 @keyframes 規(guī)則模仿左右搖動：

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

• 關鍵幀詳細信息 ：translate3d 屬性將彈出框稍微向左和向右移動以創(chuàng)建晃動效果。
• 可重用類：將 shake 類應用于任何元素都會觸發(fā)動畫。

第 2 部分：使用 Tippy.js 創(chuàng)建登錄彈出窗口

我們將使用 Tippy.js 創(chuàng)建一個可點擊的登錄彈出窗口。彈出窗口將包括：

• 電子郵件輸入字段。
• “登錄”按鈕。
• 用于處理登錄邏輯和搖動效果的事件偵聽器。

這是設置彈出窗口的核心 JavaScript：

第 1 步：登錄類

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 ：確保彈出框符合您的設計。這是一個簡單的設置：

.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 觸發(fā)器元素 ：向 HTML 添加觸發(fā)器元素：

<hr>

<h3>
  
  
  第四部分：測試震動效果
</h3>

<ol>
<li>單擊<strong>登錄</strong>按鈕打開彈出窗口。</li>
<li>輸入無效的電子郵件并提交。觀察彈出框晃動，表明有錯誤。</li>
<li>輸入有效的電子郵件，看不到晃動——成功！</li>
</ol>


<hr>

<h3>
  
  
  結論：用戶友好的錯誤提示
</h3>

<p>搖動效果通過提供清晰、直觀的錯誤指示器來增強用戶體驗，而不會因為額外的消息而使 UI 變得混亂。與用于時尚彈出窗口的 Tippy.js 和用于交互性的 vanilla JS 相結合，此設置干凈、實用且具有視覺吸引力。</p>

<p>不斷嘗試和調(diào)整——因為出色的用戶體驗取決于細節(jié)！</p>

<p>有關 Web 開發(fā)的更多技巧，請查看 <strong>DailySandbox</strong> 并注冊我們的<strong>免費時事通訊</strong>以保持領先地位！</p>


          

            
        

以上是向登錄彈出窗口添加'搖動”效果以提供視覺錯誤提示的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！