Vuejs2.0学习笔记-过渡&动画

原创
2019/03/04 10:19
阅读数 34

即:一个样式到另一个样式的过渡(动画)效果

Vue在插入、删除、更新DOM时,通过多种不同方式的应用过渡效果。但是本质上还是使用CSS3动画,transition、animation等,或者以下工具:

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库,如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

基本用法介绍如下:

  1. 使用transition组件(即标签),将要执行动画的元素包含在该组件内
<div v-cloak id="app">
    <button @click="show=!show">Toggle</button>
    <transition name="fade">
        <p v-if="show">{{message}}</p>
    </transition>
</div>

备注:当插入或者删除包含在 transition 组件中的元素时, Vue将会做以下处理:

  • 自动嗅探目标元素是否应用了CSS过渡或动画,如果是,在恰当的时机添加/删除CSS类名(6个,分别为v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active, v-leave-to),其中当<transition>没有名字,则v-是这6个类名的默认前缀,如果使用了name, 则用真实的name值。
  • 如果过渡组件提供了javascript钩子函数,这些钩子函数酱紫啊恰当的时机被调用。
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}
  • 如果没有检测到CSS动画/过渡,或者javascript,则DOM操作在下一帧中立即执行。

引入第三方CSS库:animate.css

<link rel="stylesheet" type="text/css" href="css/animate.css">
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <p v-if="show">{{message}}</p>
</transition>

多元素动画:使用transition-group以及:key=指定

<transition-group>
    <p :key=1 v-if="show">{{message}}</p>
    <p :key=2 v-if="show">{{message}}</p>
</transition-group>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部