如果在vue中实现一个输入框的抖动效果?

本文详细介绍了如何在Vue.js中实现元素的抖动动画效果,包括初始化动画、执行动画过程、修改元素位置的方法及注意事项。通过具体代码示例,展示了如何设置动画参数、控制动画方向和停止条件,以及如何确保Z轴动画正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 先来理下思路?

1)抖动就是摆动,现实中的钟摆可以很形象。
2)当摆动到临界点后,就会向相反的方向摆动。
3)在没有动力时,摆动会慢慢停止。

2.用法:

1329237-20181019171829632-134306779.png
:start.sync 里面是抖动器名字(不同name), :range ={包含x,y, z}

3.初始化抖动

initJitter() {
// 把start变成false, 方便下次点击
this.$emit('update:start', false);
// 清除上次动画
this.clearAnimate();
// 设置currentRange, 填充this.range 中没有的项
this.currentRange = Object.assign({}, { x: 0, y: 0, z: 0 }, this.range);
// 获取需要操作的的项 和 每次需要摆动的量
const { position, shiftNumber } = this.getPositionAndShiftNumber();
this.position = position;
this.shiftNumber = shiftNumber;
// 初始 move 起始点是0
this.move = { x: 0, y: 0, z: 0 };
// 初始时 是顺时针
this.isClockwise = true;
// 执行动画
this.timer = window.requestAnimationFrame(this.continueJitter);
},

4.执行动画:

// 持续抖动
continueJitter() {
this.refreshMove(this.isClockwise ? -1 : 1);
// 绝对值
const absMove = this.getAbsMove();
const currentRange = this.currentRange;
let changeDirection = false;
for (let i = 0, l = this.position.length, p; i < l; i += 1) {
p = this.position[i];
// 判断是否到达临界值,到达后 应该反方向执行动画
if (currentRange[p] <= absMove[p]) {
// 等比例缩减
this.currentRange[p] -= this.shiftNumber[p];
// 判断如果已经无力再摆动,就让摆动停止, 只要有一个值达到了0,所有都会达到
if (this.currentRange[p] <= 0) {
// 停止在起始点上
this.jitterView({ x: 0, y: 0, z: 0 });
// 清除动画
this.clearAnimate();
return;
}
// 更新move为临界点
this.move[p] = this.isClockwise ? -this.currentRange[p] : this.currentRange[p];
// 改变摆动方向
changeDirection = true;
}
}
if (changeDirection) {
// 摆动方向取反
this.isClockwise = !this.isClockwise;
}
// 更新元素位置
this.jitterView(this.move);
// 继续执行动画
this.timer = window.requestAnimationFrame(this.continueJitter);
},

5.修改元素位置:

jitterView({ x = 0, y = 0, z = 0 }) {
this.$el.style.transform = translate3d(${x}px, ${y}px, ${z}px);
},

6.需要时,必须给当前元素的父级添加 perspective, 从而修改子级透视效果

mounted() {
// 如果要执行 z 轴动画需要设置父级,从而修改子级透视效果,否则 Z 轴没有效果
if (this.range.z > 0) {
const parentEl = this.$el.parentNode;
Object.keys(this.perspectiveStyle).forEach((key) => {
parentEl.style[key] = this.perspectiveStyle[key];
});
}
},

7.传入的属性

props: {
// 抖动范围,单位是px, 例如:{x: 4, y: 2, z: 10}
range: {
type: Object,
default: () => { return { z: 8 }; },
},
start: {
type: Boolean,
required: true,
},
shiftPercent: {
type: Number,
default: 0.1, // 移动range中初始值的百分比
},
perspectiveStyle: {
type: Object,
default: () => {
return {
perspective: '300px',
perspectiveOrigin: 'center center'
};
}
}
},

参考原文:https://www.cnblogs.com/zhangkunweb/p/vue_jitter.html

转载于:https://www.cnblogs.com/panax/p/9817664.html

### 解决 `el-input` 输入时输入框抖动问题 #### 一、原因分析 1. **组件实例过多** 当存在大量 `el-input` 组件实例时,其内部的 `v-model` 数据绑定会在每次表单输入时频繁触发更新事件,从而造成性能瓶颈并引发界面卡顿现象[^1]。 2. **动态渲染控制不当** 使用 `v-if` 来管理表格列的显示隐藏逻辑可能导致 DOM 结构不稳定。特别是当随机数作为键值(`:key="Math.random()"`)传递给元素时,会使得 Vue 难以追踪节点变化,进而导致视觉上的抖动效果[^2]。 3. **特定组件属性冲突** 对于嵌套在 `el-table` 内部的某些复杂组件(如 `el-cascader`),由于它们自带样式调整机制(比如自动改变内含 `el-input` 的尺寸),可能会干扰外部布局稳定性,最终表现为输入区域的异常跳动或闪烁行为[^3]。 4. **移动设备兼容性差异** 在 Android 平台上点击位于页面底部附近的 `<input>` 类型标签可能因为软键盘弹出而影响整体布局结构,尤其是那些依赖绝对定位 (`position: fixed`) 实现固定的 UI 元素更容易受到影响[^4]。 #### 二、解决方案建议 ##### 方案A:优化数据处理流程减少不必要的重绘操作 对于由多个 `el-input` 构建而成的大规模交互式表单项集合而言,考虑引入防抖技术来降低监听器响应频率,以此缓解因过度刷新带来的压力。具体做法可参照如下代码片段: ```javascript // 定义一个简单的防抖函数用于包裹原始方法调用 function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); } } export default { methods:{ handleInput(event){ this.debouncedUpdateValue(event.target.value); // 调用经过防抖封装后的 setter 方法 }, updateValue(value){ /* 更新实际存储的数据 */}, ..., mounted(){ this.debouncedUpdateValue=debounce(this.updateValue,500)// 初始化防抖处理器 } } } ``` ##### 方案B:修正模板中的条件渲染策略确保稳定输出 针对采用 `v-if` 指令调控可见性的场景下发生的瞬态错乱状况,推荐指定静态唯一标识符而非变动数值充当关联标记。例如: ```html <template> <!-- 错误示范 --> <div v-for="(item,index) in items" :key="index"> ... </div> <!-- 正确实践 --> <div v-for="item in items" :key="item.id">...</div> <!-- item对象应具备稳定的id字段 --> </template> ``` ##### 方案C:定制 CSS 样式修复特殊控件引起的版面失衡 考虑到部分插槽化子部件(像级联选择器)本身携带额外装饰特性会对宿主环境施加不良作用力,则可通过覆盖默认表现形式的方式消除负面影响。下面给出了一组适用于 `.my-custom-form .fix_shake_wrap` 下辖目标的选择器声明: ```css .my-custom-form .fix_shake_wrap .el-cascader__tags{ max-height: 100px!important; overflow:auto!important; } .my-custom-form .fix_shake_wrap .el-cascader .el-input{ height: 120px!important; } ``` ##### 方案D:适配移动端浏览器特性规避潜在风险 鉴于不同操作系统间存在的硬件加速机制区别以及各自特有的窗口管理模式,有必要采取预防措施防止极端情况下发生不可预见的行为。一种可行的办法是在应用全局范围内设定媒体查询规则限定受影响范围内的样式属性配置: ```css @media (max-width:768px){ body{ touch-action:none; /* 禁止触屏缩放 */ } input[type='text'],textarea{ position:relative!important;/* 取消浮动定位 */ z-index:9999!important; /* 提升层级优先级 */ } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值