transition标签_vue中的transition

原创：牛津小马哥web前端工程师陈小妹妹。

​vue中的transtion是一个动画过渡封装组件，常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。

如果你对CSS中的transition的使用不够熟悉的话，可以查看往期文章

a href="http://mp.weixin.qq.com/s?__biz=MzIzMDM3NzUwOA==&mid=2247483677&idx=1&sn=8c09f19d204b6892aa0ba0212cb5ccfc&chksm=e8b51056dfc29940dcba7684750fd5eebf0360ec837d5077fdf575f5c5f73d7b8441759da865&scene=21#wechat_redirect">css transition

现在，让我们开始吧！

基本使用：

当页面中的DOM元素需要进行更新，移除和插入时，可使用transition封装组件进行动画的过渡。

同时，transiton组件可配合CSS类名，第三方 CSS 动画库，过渡组件的钩子函数以及第三方 JavaScript 动画库使用。使过渡效果更多样化。

官网例子：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}

vue提供的wrapper包装组件——transition，在包裹的元素中，有涉及到v-if，,v-show, 动态组件,组件根节点,，都会给它们添加进入/离开的过渡效果。

Transition Classes

从上面的例子中，也许你发现了给transiton组件的指定class类添加CSS，才有呈现过渡效果。

一个完整的transiton组件的class类，有6个，通过指定不同的class来添加样式来达到过渡的CSS效果。

01v-enter：定义进入过渡的开始状态。02v-enter-active：定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。03v-enter-to: 定义进入过渡的结束状态。04v-leave: 定义离开过渡的开始状态。05v-leave-active：定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。06v-leave-to: 定义离开过渡的结束状态。

默认类名是以上6个，如果在transition标签中指定了name=’xxx’,那么6个类名将会变成

xxx开头的，例如xxx-enter-active。

CSS transitions

我们可以通过以下特性来自定义过渡类名：

1. enter-class
2. enter-active-class
3. enter-to-class
4. leave-class
5. leave-active-class
6. leave-to-class

他们的优先级高于普通的类名，一般与其他第三方 CSS 动画库，如 Animate.css结合使用。

其实就是绑定了class在transition标签中，class引用了Animate.css的class样式包。

示例：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

JavaScript 钩子

// ...
methods: {

  beforeEnter: function (el) {
        //...
  },

  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  beforeLeave: function (el) {
    // ...
  },
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

可以在属性中声明 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>

关于transtion的内容就是这些~感谢阅读！