Vue 集成 Animate.css

版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82848342

通过CSS实现了很多动画效果，可以直接调用

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

官网

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>