vue运用animate.css设置transition动画_animate.css在transition标签

vue的transition动画

• 关于vue中animation动画问题

  • 找到要用动画的元素。我是想要实现切换页面的动画效果，所以找到app.vue中的router-view，用transition将它包裹起来。
  • 用动画库animate.css，需要npm install animate.css --save
  • 在main.js中引入动画

  import animated from 'animate.css'//引入动画
  Vue.use(animated)
  1
  2

  • 4.开始写transition动画了

  <template>
      <div id="app">
          <Navbar></Navbar>
          <!-- 设置进入、离开动画 -->
          <transition
          enter-active-class="animated zoomIn faster"
          leave-active-class="animated zoomOut faster"
          class="tran"
          mode="out-in"
          >
          <router-view class="show_animate"/>
          </transition>
      </div>
  </template>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

  注意：需要给transition加一个class类,设置position: relative，然后给将要进行动画的元素设置position: absolute，否则动画位置会很乱。还需要设置给transition设置mode=“out-in”，是上个动画结束再执行下一个，不然看起来会很怪。

• transition-group也同理

  • 这里就给个链接