15個對開發人員有用的Vue.js動畫庫

英文 | https://javascript.plainenglish.io/top-15-vue-js-animation-libraries-e173fdefb49b

翻譯 | 小愛

1、vue2-animate

位址：https://www.npmjs.com/package/vue2-animate

一個可以在你的網站中即用型跨浏覽器動畫庫，非常适合首頁、滑塊和動畫引導提示。這是Animate.css 的一個端口，用于 Vue.js 2.0/3.0 和Alpines.js 中的轉換。盡管文檔不符合标準，但具有前端開發經驗的開發人員會發現使用它也很容易。

• 便于使用
• 響應式

安裝：

npm i vue2-animate      

2、vue-kinesis

位址：https://www.npmjs.com/package/vue-kinesis

它是一個強大的動畫工具，開發人員可以用它來建立出色的動畫。它還允許用各種自定義屬性來幫助實作所需的效果。

• 便于使用
• 有很棒的文檔

安裝：

npm i vue-kinesis      

3、ts particles

位址：https://www.npmjs.com/package/tsparticles

一個易于使用的輕量級庫，可用于制作粒子動畫以應用于你網站的背景。即用型元件可用于 React、Vue.js（2.x 和 3.x）、Angular、Svelte、jQuery、Preact、Inferno。

• 便于使用
• 文檔清晰
• 高度可定制

安裝：

npm itsparticles      

4、v-number

位址：https://www.npmjs.com/package/v-number

v-number 是 Vue.js 一個元件，用于應用平滑的垂直數字過渡效果，一個非常平滑和輕量級的庫，可用于快速建構的個人前端項目。

• 便于使用
• 可定制
• 光滑的

安裝：

npm i v-number      

5、vue-prlx

位址：https://www.npmjs.com/package/vue-prlx

Vue-Prlx 是Vue.js一個視差指令，它對應用程式中的圖像應用可定制的視差滾動效果，它可以為平移和背景位置設定動畫。

• 可定制
• 強烈推薦用于個人項目。

安裝：

npm i vue-prlx      

6、vue-typical

位址：https://www.npmjs.com/package/vue-typical

它是一個非常簡單和小型的 Vue.js 元件，用于 Vue.js 應用程式的動畫輸入，它還用于約 400 位元組的 JavaScript動畫輸入。由于這個庫是相當新的，而且每個月都會釋出更新的版本，是以建議僅使用這個庫來為你的個人項目嘗試一些新的東西。

• 簡單而輕
• 應用個人項目

安裝：

npm i vue-typical      

7、vue-collapse-transition

位址：https://www.npmjs.com/package/@ivanv/vue-collapse-transition

你可以使用此庫水準或垂直折疊元素，使用自定義 Vue 過渡，并且支援固定和“自動”寬度和高度。

• 平滑。
• 内置過渡。

安裝：

npm i @ivav/vue-collapse-transition      

8、v-animate- css

位址：https://github.com/jofftiquez/v-animate-css

它是最受歡迎和使用最廣泛的 Vue 動畫庫之一，其最小化的檔案版本小到足以在移動網站中使用。

• 良好的文檔。
• 最容易為 Animate.css 實作 Vue 指令。

安裝：

npm install v-animate-css — save      

9、vue2-transitions

位址：https://www.npmjs.com/package/vue2-transitions

Vue2-transitions 是一個優雅且可重用的元件轉換，您可以在許多項目中重用它。您可以導入所需的過渡并根據需要自定義它們。

• 便于使用
• 高度可定制

安裝：

npm i vue2-transitions      

10、vue-lottie

位址：https://www.npmjs.com/package/vue-lottie

一個很棒的 Vue 庫，可以解析 Adobe After Effects 動畫并使用 Bodymovin 将它們導出為JSON并在本地播放。您可以輕松建立和送出精美的動畫，而無需工程師手動重新建立它們。

• 使用簡單
• 初學者友好。

安裝：

npm i vue-lottie      

11、 vue-fake3d-image-effect

位址：https://github.com/LuXDAmore/vue-fake3d-image-effect

Fake3d 是一個 Vue.js 元件，可用于在 Vue.js 應用程式中建立互動式且符合 SSR 的 3D 圖像效果。

• 有很棒的文檔可以查閱學習
• 高性能

安裝：

npm install — save @luxdamore/vue-fake3d-image-effect      

12、particles-bg-vue

位址：https://github.com/lindelof/particles-bg-vue

這是另一個很棒的 Vue.js 動畫元件，用于建立有吸引力的背景。你可以通過改變不同的參數來實作各種效果。

• 易于使用，隻需幾行代碼。
• 易于定制。

安裝：

npm install — save particles-bg-vue      

13、vue-animate-onscroll

位址：https://www.npmjs.com/package/vue-animate-onscroll

易于使用的庫，當你需要為你的網站添加一些插件時，它會派上用場。使用這個 vue.js 元件，你可以建立這樣的元素，當你滾動元素時首先觸發動畫。

• 便于使用。
• 輕量級元件。

安裝：

npm i vue-animate-onscroll      

14、v-show-slide

位址：https://www.npmjs.com/package/v-show-slide

v-show-slide 是 Vue.js一個元件，用于顯示/隐藏具有可配置的向上/向下滑動動畫的元素。沒有 CSS 方法可以将元素設定為高度或高度：auto，這個 Vue.js 指令解決了這個問題。

• 輕量級元件。
• 良好的文檔。

安裝：

npm i v-show-slide      

15、Vue 故障

位址：https://www.npmjs.com/package/vue-glitch

樣式偏好可能會有很大不同，使用 Vue 可以很容易地為你的元素賦予獨特的外觀。Vue Glitch 用作 Vue 的指令，可用于将故障效果應用于任何類型的文本。

• 很好的文檔。
• 便于使用。

安裝：

npm i vue-glitch      

感謝你的閱讀，本文完。

學習更多技能

請點選下方公衆号

​