vue + webpack 中怎么用 animate.css啊

新手,在学习路由的时候想加个过场动画,下了个animate.css放在static目录下,然后在App.vue中的style标签里@import url('../static/animate.css');,结果没有报错也没有动画效果,想问问应该怎么用啊,下面是我的代码(路由跳转是对的):

<template>
  <div id="app">
      <router-view class="animated" transition="bounce"></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  },
  transitions: {
    bounce: {
      enterClass: 'bounceInLeft',
      leaveClass: 'bounceOutRight'
    }
  }
}
</script>

<style>
@import url('../static/animate.css');
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
阅读 7.5k
评论
    6 个回答

    :)
    上面的答案都挺没诚意的,我来认真回答一下。


    无关vue,主要是webpack,简单5步即可。

    第1步:安装依赖

    cnpm install animate.css --save-dev

    第2步:安装加载器

    cnpm install css-loader --save-dev
    cnpm install style-loader --save-dev

    将 animate.css 也看成是一个模块,然后用 css-loader 来读取它,再用 style-loader 把它插入到页面中。  

    第3步:webpack.config.js配置

    module.exports = {
      module: {
        rules: [
          {
            //关键是以下两行
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          }
        ]
      }
    }

    第4步:入口文件配置

    import Animate from 'animate.css'
    

    第5步:执行编译

    编译结果:
    成功将animate.css插入项目页面中。

    clipboard.png

    插入animate.css成功后...

    1. 为路由添加过渡并使用animate.css

    <div id='app'>
          <transition name="bounce" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
            <router-view></router-view>
          </transition>
    </div>

    2. 删除不相关内容

      transitions: {
        bounce: {
          enterClass: 'bounceInLeft',
          leaveClass: 'bounceOutRight'
        }
      }

    3. 执行webpack编译进行测试

      相似问题
      推荐文章