79Vue - 单元素过渡效果-CFANZ编程社区

79Vue - 单元素过渡效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

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

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡。

条件渲染（使用 v-if）
条件展示（使用 v-show）
动态组件
组件根节点

这里是一个典型的例子：

HTML代码：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

JS代码：

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

效果图：

79Vue - 单元素过渡效果_css

元素封装成过渡组件之后，在遇到插入或删除时，Vue 将

1.自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。

2.如果过渡组件设置了过渡的 JavaScript 钩子函数，会在相应的阶段调用钩子函数。

3.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，与 Vue，和Vue的 nextTick 概念不同)。

0 条评论