可以通过 appear 属性 设置节点在初始渲染的过渡,默认和进入/离开过渡一样,同样也可以自定义 CSS 类名和自定义 JavaScript 钩子;

多个组件的过渡

当有相同标签名的元素切换时,推荐通过 key 属性 设置唯一的值来标记,否则 Vue 为了效率只会替换相同标签内部的内容

两个元素互相切换可以这样设置

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? '内容' : '内容不存在' }}
  </button>
</transition>

过渡模式

  • in-out:新元素先进行过渡,完成之后当前元素过渡离开。
  • out-in:当前元素先进行过渡,完成之后新元素过渡进入。
<transition name="fade" mode="out-in"> //写到mode里就行
  <!-- 内容 -->
</transition>

这里还有多个组件的过渡** ,可以直接去看官网,例子跟我上班的大同小异,我在这里就不解读了**

列表过渡

使用 v-for的这种场景中,使用 <transition-group> 组件

这个组件的几个特点:

  • 不同于 <transition>,它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag 属性更换为其他元素。
  • 过渡模式不可用,因为不再相互切换特有的元素。
  • 内部元素总是需要提供唯一的 key 属性值。
  • CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。
 <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。

使用v-move属性就可以做到,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name 属性来自定义前缀,也可以通过 move-class 属性手动设置。

 <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
<style>
.list-move {
  transition: transform 1s;
}
</style>

这样就可以在列表改变顺序的时候看到过渡了

注意:使用 FLIP(v-move) 过渡的元素不能设置为 display: inline 。可以设置为 display: inline-block 或者放置于 flex 中

如果想复用过渡效果,创建一个可复用过渡组件将<transition> 或者 <transition-group> 作为根组件,然后将任何子组件放置在其中就可以了。

最后 

如果对您有帮助,希望能给个👍评论收藏三连!

公_号:前端老实人,无偿解答问题哦❤