做網(wǎng)站 客戶一直要求改杭州網(wǎng)絡(luò)推廣有限公司
輸入時(shí)字符跳動(dòng)動(dòng)畫實(shí)現(xiàn)
在前端開發(fā)中，為了提升用戶體驗(yàn)，我們經(jīng)常需要為用戶的交互行為提供即時(shí)的反饋。這不僅讓用戶知道他們的操作有了響應(yīng)，還可以讓整個(gè)界面看起來(lái)更加生動(dòng)、有趣。本文將通過(guò)一個(gè)簡(jiǎn)單的例子講解如何實(shí)現(xiàn)在用戶輸入字符時(shí)，讓字符產(chǎn)生一個(gè)小跳動(dòng)的動(dòng)畫效果，使得界面交互更為生動(dòng)。
技術(shù)方案概述
實(shí)現(xiàn)這一效果的核心思路是利用CSS的關(guān)鍵幀動(dòng)畫（Keyframes Animation）來(lái)定義字符的跳動(dòng)動(dòng)畫，并通過(guò)JavaScript來(lái)動(dòng)態(tài)地將動(dòng)畫應(yīng)用到用戶每次輸入的新字符上。同時(shí)，為了保持輸入框內(nèi)容和展示的內(nèi)容同步，我們還需要對(duì)輸入框的值進(jìn)行監(jiān)聽，并相應(yīng)地更新顯示區(qū)域的內(nèi)容。
關(guān)鍵技術(shù)點(diǎn)
- CSS 關(guān)鍵幀動(dòng)畫：利用
@keyframes規(guī)則定義一個(gè)動(dòng)畫，描述該動(dòng)畫中每個(gè)階段的樣式。 - JavaScript 事件監(jiān)聽：監(jiān)聽輸入框（
<input>元素）的input事件，以便在用戶每次輸入時(shí)觸發(fā)更新。 - JavaScript DOM 操作：動(dòng)態(tài)地創(chuàng)建和更新DOM元素來(lái)反映輸入內(nèi)容的變化，并應(yīng)用動(dòng)畫效果。
實(shí)現(xiàn)步驟
- 定義字符跳動(dòng)的動(dòng)畫
首先，我們使用@keyframes規(guī)則定義一個(gè)名為bounce的動(dòng)畫。這個(gè)動(dòng)畫簡(jiǎn)單地使得元素先向上移動(dòng)10px（30%過(guò)程點(diǎn)），然后回到原位置（100%過(guò)程點(diǎn)）。
@keyframes bounce {0% { transform: translateY(0); }30% { transform: translateY(-10px); }100% { transform: translateY(0); }
}
- 樣式準(zhǔn)備
我們需要為動(dòng)態(tài)生成的字符元素應(yīng)用動(dòng)畫，并對(duì)輸入框和文本展示區(qū)域進(jìn)行基本的樣式設(shè)置。
.character {display: inline-block;animation: bounce 0.6s;font-size: 24px;
}#input-box {/* ...省略無(wú)關(guān)樣式... */opacity: 0; /* 讓輸入框透明，但仍可輸入 */
}#animated-text {/* ...省略無(wú)關(guān)樣式... */
}
- JavaScript 事件監(jiān)聽與動(dòng)態(tài)DOM更新
當(dāng)用戶輸入字符時(shí)，通過(guò)監(jiān)聽input事件來(lái)捕獲輸入值的變化，并根據(jù)這些變化動(dòng)態(tài)創(chuàng)建<span>元素來(lái)包裹每個(gè)字符。對(duì)于新增的字符，我們?yōu)槠涮砑佣x好的動(dòng)畫效果。
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)容，不添加動(dòng)畫if (inputText.length < existingText.length) {container.innerHTML = '';for (let char of inputText) {let span = document.createElement('span');span.textContent = char;container.appendChild(span);}} else {// 新增字符，添加跳動(dòng)動(dòng)畫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>輸入動(dòng)畫效果</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)容，不添加動(dòng)畫if (inputText.length < existingText.length) {container.innerHTML = ''; // 清除舊的字符// 重新添加字符，但不包括最新的字符，因?yàn)槭莿h除操作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)用動(dòng)畫的類span.textContent = newChar;container.appendChild(span);}});</script>
</body></html>
總結(jié)
通過(guò)以上的技術(shù)方案，我們實(shí)現(xiàn)了一個(gè)在用戶輸入字符時(shí)，字符跳動(dòng)的動(dòng)畫效果。這種方法不僅增強(qiáng)了用戶體驗(yàn)，使界面交互看起來(lái)更加動(dòng)態(tài)和有趣，而且也體現(xiàn)了CSS動(dòng)畫和JavaScript相結(jié)合的強(qiáng)大功能。對(duì)于開發(fā)者來(lái)說(shuō)，掌握這類交互效果的實(shí)現(xiàn)方法可以更好地為用戶創(chuàng)建吸引人的前端體驗(yàn)。