做網(wǎng)站 客戶一直要求改杭州網(wǎng)絡(luò)推廣有限公司
輸入時字符跳動動畫實現(xiàn)
在前端開發(fā)中，為了提升用戶體驗，我們經(jīng)常需要為用戶的交互行為提供即時的反饋。這不僅讓用戶知道他們的操作有了響應(yīng)，還可以讓整個界面看起來更加生動、有趣。本文將通過一個簡單的例子講解如何實現(xiàn)在用戶輸入字符時，讓字符產(chǎn)生一個小跳動的動畫效果，使得界面交互更為生動。
技術(shù)方案概述
實現(xiàn)這一效果的核心思路是利用CSS的關(guān)鍵幀動畫（Keyframes Animation）來定義字符的跳動動畫，并通過JavaScript來動態(tài)地將動畫應(yīng)用到用戶每次輸入的新字符上。同時，為了保持輸入框內(nèi)容和展示的內(nèi)容同步，我們還需要對輸入框的值進行監(jiān)聽，并相應(yīng)地更新顯示區(qū)域的內(nèi)容。
關(guān)鍵技術(shù)點
- CSS 關(guān)鍵幀動畫：利用
@keyframes規(guī)則定義一個動畫，描述該動畫中每個階段的樣式。 - JavaScript 事件監(jiān)聽：監(jiān)聽輸入框（
<input>元素）的input事件，以便在用戶每次輸入時觸發(fā)更新。 - JavaScript DOM 操作：動態(tài)地創(chuàng)建和更新DOM元素來反映輸入內(nèi)容的變化，并應(yīng)用動畫效果。
實現(xiàn)步驟
- 定義字符跳動的動畫
首先，我們使用@keyframes規(guī)則定義一個名為bounce的動畫。這個動畫簡單地使得元素先向上移動10px（30%過程點），然后回到原位置（100%過程點）。
@keyframes bounce {0% { transform: translateY(0); }30% { transform: translateY(-10px); }100% { transform: translateY(0); }
}
- 樣式準(zhǔn)備
我們需要為動態(tài)生成的字符元素應(yīng)用動畫，并對輸入框和文本展示區(qū)域進行基本的樣式設(shè)置。
.character {display: inline-block;animation: bounce 0.6s;font-size: 24px;
}#input-box {/* ...省略無關(guān)樣式... */opacity: 0; /* 讓輸入框透明，但仍可輸入 */
}#animated-text {/* ...省略無關(guān)樣式... */
}
- JavaScript 事件監(jiān)聽與動態(tài)DOM更新
當(dāng)用戶輸入字符時，通過監(jiān)聽input事件來捕獲輸入值的變化，并根據(jù)這些變化動態(tài)創(chuàng)建<span>元素來包裹每個字符。對于新增的字符，我們?yōu)槠涮砑佣x好的動畫效果。
document.getElementById('input-box').addEventListener('input', function (event) {const inputText = event.target.value;const container = document.getElementById('animated-text');const existingText = container.textContent;// 如果是刪除操作，直接同步內(nèi)容，不添加動畫if (inputText.length < existingText.length) {container.innerHTML = '';for (let char of inputText) {let span = document.createElement('span');span.textContent = char;container.appendChild(span);}} else {// 新增字符，添加跳動動畫const newChar = inputText[inputText.length - 1];let span = document.createElement('span');span.className = 'character';span.textContent = newChar;container.appendChild(span);}
});
DEMO
這段代碼可以直接拷貝到html文件中允許查看效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輸入動畫效果</title><style>@keyframes bounce {0% {transform: translateY(0);}30% {transform: translateY(-10px);}100% {transform: translateY(0);}}.character {display: inline-block;animation: bounce 0.6s;font-size: 24px;font-family: 'Arial', sans-serif;}#input-box {font-size: 24px;opacity: 0;width: 200px;min-height: 28px;line-height: 28px;position: absolute;top: 0;left: 0;z-index: 2;}#animated-text {border: 1px solid #eee;width: 200px;min-height: 28px;line-height: 28px;position: absolute;top: 0;left: 0;font-size: 24px;}</style>
</head><body><input type="text" id="input-box" placeholder="輸入文字看效果..."><div id="animated-text"></div><script>document.getElementById('input-box').addEventListener('input', function (event) {const inputText = event.target.value;const container = document.getElementById('animated-text');const existingText = container.textContent;// 如果是刪除操作，直接同步內(nèi)容，不添加動畫if (inputText.length < existingText.length) {container.innerHTML = ''; // 清除舊的字符// 重新添加字符，但不包括最新的字符，因為是刪除操作for (let char of inputText) {let span = document.createElement('span');span.textContent = char;container.appendChild(span);}} else {// 找出新增的字符const newChar = inputText[inputText.length - 1];let span = document.createElement('span');span.className = 'character'; // 應(yīng)用動畫的類span.textContent = newChar;container.appendChild(span);}});</script>
</body></html>
總結(jié)
通過以上的技術(shù)方案，我們實現(xiàn)了一個在用戶輸入字符時，字符跳動的動畫效果。這種方法不僅增強了用戶體驗，使界面交互看起來更加動態(tài)和有趣，而且也體現(xiàn)了CSS動畫和JavaScript相結(jié)合的強大功能。對于開發(fā)者來說，掌握這類交互效果的實現(xiàn)方法可以更好地為用戶創(chuàng)建吸引人的前端體驗。