Vue-transition组件的Css动画+过渡（进阶），笔记总结 “建议收藏”

​

可以通过 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> 作为根组件，然后将任何子组件放置在其中就可以了。

​

最后

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

想跟博主交朋友的可以关注下🌹，有问题评论留言。

博主为人老实，无偿解答问题哦❤