前言：在做语音APP的H5开发的时候，遇到很多动效还原的场景，而且对用户体验感有较强的要求。某些场景经常会有用到transition这个属性。

transition

  • Props：

    • name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
    • appear - boolean，是否在初始渲染时使用过渡。默认为 false。
    • css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
    • type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
    • mode - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
    • duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
    • enter-class - string
    • leave-class - string
    • appear-class - string
    • enter-to-class - string
    • leave-to-class - string
    • appear-to-class - string
    • enter-active-class - string
    • leave-active-class - string
    • appear-active-class - string

  • 事件：

    • before-enter
    • before-leave
    • before-appear
    • enter
    • leave
    • appear
    • after-enter
    • after-leave
    • after-appear
    • enter-cancelled
    • leave-cancelled (v-show only)
    • appear-cancelled

运用

  • 可以通过css来自定义transition达到的效果
  • 如果想在transition的过渡效果完成之后，触发某个函数，可以用after-leave来实现，在进入过渡之后完成后触发的话就用after-enter。

模式

  • in-out：新元素先进行过渡，完成之后 当前元素过渡离开。
  • out-in：当前元素先进行过渡，完成之后 新元素过渡进入。
  • 示例:
1
2
3
4
5
6
7
<!-- 事件钩子 -->
<div id="demo" name="fade" mode="out-in">
  <!-- 事件EnterComplete在过渡进入完成之后触发,LeaveComplete在过渡离开完成之后触发 -->
  <transition @after-enter="EnterComplete" @after-leave="LeaveComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>
1
2
3
4
5
6
7
function EnterComplete(){
	console.log("过渡进入完成")
}

function LeaveComplete(){
	console.log("过渡离开完成")
}