【前端】输入时字符跳动动画实现

输入时字符跳动动画实现

在前端开发中,为了提升用户体验,我们经常需要为用户的交互行为提供即时的反馈。这不仅让用户知道他们的操作有了响应,还可以让整个界面看起来更加生动、有趣。本文将通过一个简单的例子讲解如何实现在用户输入字符时,让字符产生一个小跳动的动画效果,使得界面交互更为生动。
请添加图片描述

技术方案概述

实现这一效果的核心思路是利用CSS的关键帧动画(Keyframes Animation)来定义字符的跳动动画,并通过JavaScript来动态地将动画应用到用户每次输入的新字符上。同时,为了保持输入框内容和展示的内容同步,我们还需要对输入框的值进行监听,并相应地更新显示区域的内容。

关键技术点

  1. CSS 关键帧动画:利用@keyframes规则定义一个动画,描述该动画中每个阶段的样式。
  2. JavaScript 事件监听:监听输入框(<input>元素)的input事件,以便在用户每次输入时触发更新。
  3. JavaScript DOM 操作:动态地创建和更新DOM元素来反映输入内容的变化,并应用动画效果。

实现步骤

  1. 定义字符跳动的动画

首先,我们使用@keyframes规则定义一个名为bounce的动画。这个动画简单地使得元素先向上移动10px(30%过程点),然后回到原位置(100%过程点)。

@keyframes bounce {0% { transform: translateY(0); }30% { transform: translateY(-10px); }100% { transform: translateY(0); }
}
  1. 样式准备

我们需要为动态生成的字符元素应用动画,并对输入框和文本展示区域进行基本的样式设置。

.character {display: inline-block;animation: bounce 0.6s;font-size: 24px;
}#input-box {/* ...省略无关样式... */opacity: 0; /* 让输入框透明,但仍可输入 */
}#animated-text {/* ...省略无关样式... */
}
  1. JavaScript 事件监听与动态DOM更新

当用户输入字符时,通过监听input事件来捕获输入值的变化,并根据这些变化动态创建<span>元素来包裹每个字符。对于新增的字符,我们为其添加定义好的动画效果。

document.getElementById('input-box').addEventListener('input', function (event) {const inputText = event.target.value;const container = document.getElementById('animated-text');const existingText = container.textContent;// 如果是删除操作,直接同步内容,不添加动画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;// 如果是删除操作,直接同步内容,不添加动画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);}});</script>
</body></html>

总结

通过以上的技术方案,我们实现了一个在用户输入字符时,字符跳动的动画效果。这种方法不仅增强了用户体验,使界面交互看起来更加动态和有趣,而且也体现了CSS动画和JavaScript相结合的强大功能。对于开发者来说,掌握这类交互效果的实现方法可以更好地为用户创建吸引人的前端体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/7013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IoTDB 入门教程 基础篇④——数据库用户管理和用户权限管理

文章目录 一、前文二、修改ROOT密码三、用户登录四、查看用户列表五、创建用户六、删除用户七、修改用户八、查看指定用户的权限范围九、添加指定用户的权限范围十、删除指定用户的权限范围十一、参考 一、前文 IoTDB入门教程——导读 本文主要讲述数据库用户管理和用户权限管理…

速卖通自养号测评海外环境:成本、步骤、技巧全掌握

相信不少涉足跨境业务的企业和商家都对速卖通耳熟能详。作为当下炙手可热的跨境电商平台&#xff0c;速卖通在国内电商市场渐趋饱和的背景下&#xff0c;吸引了众多国内卖家的目光。他们纷纷入驻速卖通&#xff0c;希望借助这一平台的力量&#xff0c;成功打通跨境业务渠道。然…

vue3 原理【详解】Proxy 实现响应式

为了解决 vue2 的响应式缺陷 &#xff0c;vue3 改用 Proxy 实现响应式 使用 Proxy 实现响应式 详见代码注释 // 仿写vue3的reactive -- 声明响应式对象 function reactive(target {}) {// 若目标数据不是对象/数组,则直接返回 &#xff08;reactive 的参数必须为对象/数组才…

重新下载 ant design pronp

一、项目重建 要删除前端代码并 重新下载Ant Design Pro&#xff0c;您可以按照以下步骤操作&#xff1a; 删除项目文件夹&#xff1a;找到您的Ant Design Pro项目文件夹&#xff0c;将其完全删除。清除npm缓存&#xff1a;在命令行中运行npm cache clean --force以清除npm的缓…

1.python爬虫爬取视频网站的视频可下载的源url

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、爬取的源网站二、实现代码总结 一、爬取的源网站 http://www.lzizy9.com/ 在这里以电影片栏下的动作片为例来爬取。 可以看到视频有多页&#xff0c;因此需要…

XYCTF2024 RE ez unity 复现

dll依然有加壳 但是这次global-metadata.dat也加密了&#xff0c;原工具没办法用了&#xff0c;不过依然是可以修复的 a. 法一&#xff1a;frida-il2cpp-bridge 可以用frida-il2cpp-bridge GitHub - vfsfitvnm/frida-il2cpp-bridge: A Frida module to dump, trace or hijac…

Anaconda的环境快速迁移(目前windows,未来更新linux)

摘要&#xff1a; 日常办公经常需要在新机器上部署运行环境并进行代码调试&#xff0c;尤其是在AI迅速发展的今天&#xff0c;python已经成为了强有力的AI领域编程语言之一。为了方便对不同windows下python代码工程进行快速部署。本文主要从工具环境的安装、原环境的快速打包、…

数组操作push、pop、shift、unshift操作

这四个都是用来操作数组的,用于插入和删除元素 成对来说 push、pop都是从数组尾部操作(你看p开头的,就记住屁股就行了),分别是插入和弹出 let array [1,2,3,4,5,6] array.push(7) // 7 array // [1,2,3,4,5,6,7]push操作,数组从尾部插入,返回插入后数组的个数,改变了原数组…

【计算机毕业设计】基于SpringBoot+Vue智能停车计费系统设计与实现

目录 一、项目介绍 二、项目主要技术 三、系统功能结构设计 四、系统详细功能的实现 4.1 前台功能实现 4.2 管理员模块实现 4.3 用户后台模块实现 五、实现代码 一、项目介绍 该系统采用了java技术、SpringBoot 框架&#xff0c;连接MySQL数据库&#xff0c;具有较高…

代码随想录算法训练营第四十一天

昨天是摸鱼的一天&#xff0c;不过把电脑换了个位置&#xff0c;今天努力完成两天的任务&#xff0c;就可以玩啦&#xff01;&#xff01;加油&#xff01; 343. 整数拆分 我写的其实有点解释不通dp[0]和dp[1] class Solution { public:int integerBreak(int n) {vector<in…

Python queue使用方法

在Python中&#xff0c;queue 是一个提供线程安全队列操作的模块&#xff0c;它支持多种类型的队列&#xff0c;包括先进先出&#xff08;FIFO&#xff09;和后进先出&#xff08;LIFO&#xff09;。以下是如何使用 Python queue 模块的一些基本示例&#xff1a; 安装 通常情…

Flutter分模块开发、模块可单独启动、包含Provider

前言 目前Flutter都是在一个项目中&#xff0c;创建不同目录进行模块开发&#xff0c;我进行Android原生开发时&#xff0c;发现原生端&#xff0c;是可以将每个模块独立运行起来的&#xff0c;灵感来自这&#xff1b; 折腾了几天&#xff0c;终于给整出来了。 1、创建根目录…

QT7_视频知识点笔记_1_ 基础知识(帮助文档),窗口(内存回收机制),信号槽(传参),Lambda表达式

1.QT基础 QT是一个框架&#xff0c;不用像C语言自己从底层写&#xff0c;需要的功能可以先看是否QT库中有直接可使用的 帮助文档的使用&#xff1a;F1跳入帮助文档&#xff0c; QT中常用的类&#xff1a;比如QPushbutton&#xff0c;查看帮助文档则可知道对应的函数和解决方…

Node.js爬虫在租房信息监测与分析中的应用

在当今数字化时代&#xff0c;房地产市场的信息变化迅速&#xff0c;租房信息的获取和分析对于租房者和房东都至关重要。随着互联网技术的发展&#xff0c;利用爬虫技术来监测和分析租房信息已成为一种常见的做法。本文将探讨如何利用Node.js爬虫在租房信息监测与分析中的应用前…

我独自升级:崛起怎么下载 我独自升级游戏下载教程分享

定于5月8日全球揭幕的《我独自升级崛起》——一款扣人心弦的动作RPG巨制&#xff0c;灵感采撷于同名动画及网络漫画的热潮&#xff0c;誓将引领满怀热忱的玩家步入一场交织着深邃探索和宏大规模的奇妙冒险。该游戏立足于一个独树一帜的网络武侠宇宙&#xff0c;细腻刻画了一个凡…

git lfs的使用

git lfs的使用 git lfs install git lfs track "*.map4"git add ..gitattributes git add . git lfs ls-files详情看:https://zhuanlan.zhihu.com/p/146683392

学华为沟通,汇总5大项目沟通技巧

高效沟通在项目管理中的重要性不容小觑&#xff0c;它是确保项目顺利进行、提升团队协作效率、实现项目目标的关键因素。如果沟通不畅&#xff0c;往往容易导致成员对项目目标理解不一致&#xff0c;或信息传递不及时不准确&#xff0c;导致项目工作方向偏差&#xff0c;增加项…

什么是DMA? STM32如何配置DMA?

您好&#xff0c;我们一些喜欢嵌入式的朋友一起建立的一个技术交流平台&#xff0c;本着大家一起互相学习的心态而建立&#xff0c;不太成熟&#xff0c;希望志同道合的朋友一起来&#xff0c;抱歉打扰您了QQ群372991598 一、DMA简介 1、DMA简介 DMA(Direct Memory Access&a…

[Collection与数据结构] 七大排序算法汇总

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (90平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …

Python查询PostgreSQL数据库

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; Python与PostgreSQL的连接 需要了解如何在Python中连接到PostgreSQL数据库。这通常涉及到使用一个库&#xff0c;如psycopg2&#xff0c;它是Python中用于PostgreSQL的最流行的适配器。安装psycopg2非常简单&#x…