如果在vue中實現乙個輸入框的抖動效果?

2022-03-30 05:42:27 字數 1359 閱讀 5733

1)抖動就是擺動,現實中的鐘擺可以很形象。

2)當擺動到臨界點後,就會向相反的方向擺動。

3)在沒有動力時,擺動會慢慢停止。

:start.sync 裡面是抖動器名字(不同name), :range =

initjitter() , , this.range);

// 獲取需要操作的的項 和 每次需要擺動的量

const = this.getpositionandshiftnumber();

this.position = position;

this.shiftnumber = shiftnumber;

// 初始 move 起始點是0

this.move = ;

// 初始時 是順時針

this.isclockwise = true;

// 執行動畫

this.timer = window.requestanimationframe(this.continuejitter);

},

// 持續抖動

continuejitter() );

// 清除動畫

this.clearanimate();

return;

}// 更新move為臨界點

this.move[p] = this.isclockwise ? -this.currentrange[p] : this.currentrange[p];

// 改變擺動方向

changedirection = true;}}

if (changedirection)

// 更新元素位置

this.jitterview(this.move);

// 繼續執行動畫

this.timer = window.requestanimationframe(this.continuejitter);

},

jitterview() px, $px, $px);

},

mounted() );}},

props:

range: ; },

},start: ,

shiftpercent: ,

perspectivestyle: ;}}

},

參考原文:

react入門 實現乙個輸入框元件

按照官方文件和例程部落格,實現了乙個簡單的輸入框元件。總結一下,乙個簡單的react.js應用應按照以下步驟構建 設計元件原型和json api 拆分使用者介面為乙個元件樹 利用react,建立應用的乙個靜態版本 識別出最小的 但是完整的 代表ui的state 確認state的生命週期 新增反向資料...

實現乙個高度自適應的輸入框

有placeholder,輸入為空時,顯示placeholder 可設定maxlength 將textarea的高度設定成auto,overflow設定成visible。如下 height auto overflow x visible overflow y visible width 300px ...

實現乙個高度自適應的輸入框

需求背景 設想1 使用textarea實現 將textarea的高度設定成auto,overflow設定成visible。如下 複製 但是經過測試,textarea實際上將是預設的高度,隨著輸入的增多會出現滾動條,並沒有達到我們想要的效果。設想2 contenteditable 我們知道可以將div...