NuxtJS + animate.css 超入門

3 min readJul 8, 2020

使用 animate.css 程式庫讓你的 NuxtJS 元件輕鬆動起來

animate.css 是一個強大的動畫函式庫, 我們可以輕鬆地為元件加入酷炫, 複雜的動畫. 如果要讓 h1 標籤在網頁重整時做淡入效果, 只需要在元件的標籤加上動畫的 class 名稱即可

<h1 class="animated__animated animate__fadeIn">This is title</h1>

首先要安裝 animte.css 模組, 在 Google 打關鍵字 nuxtjs animate.css, 找到了 nuxt-animate.css 這個套件

安裝套件 : npm i @neneos/nuxt-animate.css
在 nuxt.config.js 的 modules 屬性註冊 animte.css

module.exports = {
  ...
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@neneos/nuxt-animate.css'
  ]
  ...
}

在 VueJS 專案要讓元件動起來的方法是在元件外層加入 <transition> 標籤, 假設我們要讓 h1 標籤做淡入/淡出的動畫

<transition
  mode="out-in"
  enter-active-class="animte_animated animate__fadeIn"
  leave-active-class="animte_animated animate__fadeOut"
>
  <h1>
</transition>

好了, 照理講頁面重整時應該可以看到淡入效果, 切換頁面可以看到淡出效果. 可是沒有任何反應. 所以第二個想到的方法就是在 nuxt.config.js 引入 animate.css 的 cdn 連結

module.exports = {
  ...
  /*
  ** Headers of the page
  */
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css' }
    ...
}

元件還是沒有動作. 所以拿掉外層的 <transition> 標籤, 直接在元件的 class 加入動畫 css

<h1 class="title animate__animated animate__slideInRight">
  My Project !!!
</h1>

這樣就可以動作了. 至於 <transition> 為什麼在 nuxtjs 沒有作用就是另外一個要研究的題目.

補充說明

我們可以在 Nuxtjs 專案輕鬆設定切換頁面時要產生的動畫效果.

首先在 assets 資料夾建立 style/transition.css, 加入下列代碼

.fade-enter-active, .fade-leave-active {
  transition: opacity 2000ms;
}.fade-enter, .fade-leave-to {
  opacity: 0;
}

然後在 nuxt.config.js 做以下設置

module.exports = {
  css: [
    '~assets/style/transition.css'
  ],
  transition: {
    name: 'fade',
    mode: 'out-in'
  }
}

這樣就行了. 切換頁面就可以看到淡入淡出的效果囉 !!!

NuxtJS + animate.css 超入門

補充說明

Written by Stephen Lai