1. 安装依赖
npm install animate.css --save
2. 安装加载器
npm install css-loader --save-dev
npm install vue-style-loader --save-dev
3. webpack.config.js配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'vue-style-loader', 'css-loader' ]
}
]
}
}
4. 在app.vue的style标签里引入animate.css
<style>
@import '~animate.css';
</style>
插入animate.css成功后...
为路由添加过渡并使用animate.css
<div id='app'>
<transition
name="bounce"
enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutRight"
>
<router-view></router-view>
</transition>
</div>
网友评论