“復(fù)制即用”的前端動畫組件庫爆火,Vue / React 全支持!
過去幾個月,一個名叫 ReactBits 的前端動畫組件庫在圈子里悄悄火了起來。
它最大的特點(diǎn)就是開箱即用:不需要配置、不用掌握復(fù)雜的動畫庫,復(fù)制幾行代碼,直接貼進(jìn)項(xiàng)目里,頁面立馬有動效,還挺高級的。
就在這幾天,它的作者再次出手,順勢推出了 Vue 版本 —— VueBits。
同樣的使用體驗(yàn),同樣的炫酷視覺,現(xiàn)在不僅 React 開發(fā)者能用,Vue 社區(qū)也終于迎來了這套動效組件的完整體驗(yàn)!
為什么 ReactBits 會爆火?
說白了,這東西真的解決了開發(fā)中的幾個“懶人痛點(diǎn)”:
- 不想自己手寫復(fù)雜動畫;
- 不想引入厚重的動畫庫;
- 不想調(diào)各種參數(shù)、debug 效果;
- 還得足夠好看、有設(shè)計感。
而 ReactBits,剛好全做到了:
- 80+ 動效組件,涵蓋文本、按鈕、卡片、背景、滾動、加載等常見交互;
- 即拷即用,直接從官網(wǎng) Playground 復(fù)制代碼,貼進(jìn)項(xiàng)目就能跑;
- 單組件安裝,用 CLI 工具
jsrepo
安裝任意組件,非常靈活; - 參數(shù)可調(diào),每個組件都支持 props 調(diào)整動畫效果,入門簡單、可玩性也高;
- 動效干凈自然,沒有多余花活,看得出作者對視覺也有追求。
圖片
乘勢而上,擁抱 Vue 社區(qū)
ReactBits 火了之后,Vue 開發(fā)者一直在留言:“Vue 能不能也整一個?”
作者也沒閑著,前幾天就正式上線了 Vue 版本 —— VueBits。
目前已經(jīng)實(shí)現(xiàn)了 40 多個組件,正在逐步補(bǔ)齊 React 端的完整功能,未來甚至還會加入 Vue 專屬的動畫方案。整體體驗(yàn)依舊很絲滑,用慣了 Vue 的人,上手毫無障礙。
圖片
為什么值得用?
總結(jié)一下,這套組件庫火得不是沒有道理的:
- 視覺表現(xiàn)好:動畫自然,設(shè)計感在線,不會喧賓奪主;
- 按需引入輕量不臃腫:想用哪個裝哪個,沒副作用;
- 集成簡單:代碼復(fù)制即用,不依賴額外動畫庫;
- Vue / React 都支持:不同項(xiàng)目都能直接用,統(tǒng)一風(fēng)格、統(tǒng)一體驗(yàn);
- 配套 Playground:可以在線調(diào)效果、生成代碼、直接拷走,省心省力。
鏈接附上:
- React 版:https://reactbits.dev
- Vue 版:https://vue-bits.dev
無論你用的是 Vue 還是 React,現(xiàn)在都能擁有一套好用、好看、不費(fèi)腦子的動效組件。
做個人作品集、H5 頁面、營銷頁的時候,不妨試試,真挺省事的。