Vue整合Animate.css

asing1elife發表於2018-09-26
VueCSS
版權宣告：本文首發 http://asing1elife.com ，轉載請註明出處。 https://blog.csdn.net/asing1elife/article/details/82848342

通過CSS實現了很多動畫效果，可以直接呼叫

更多精彩

官網

Animate.css

實現方式

  1. 下載 animate.css 檔案並在專案的 main.js 中引入
import Vue from `vue`

...

import `assets/plugins/animate/animate.css`

...

/* eslint-disable no-new */
new Vue({
  el: `#app`,
  render: h => h(App),
  store,
  router
})

結合 transition 元件一起使用

  • duration 可控制動畫的載入速度
<transition leave-active-class="animated fadeOutRight" enter-active-class="animated fadeInRight" :duration="300">
  <mt-field class="search-input" placeholder="請輸入搜尋內容" v-show="search" v-model="searchContent"></mt-field>
</transition>


相關文章