玩转 Vue.js 中的过渡：过渡组件的动画、多组件过渡、列表过渡

2023-09-21 05:44:39

Vue.js 中的过渡组件

Vue.js 中的过渡组件为应用程序元素提供了无缝和美观的过渡效果。无论是在构建动画或增强用户体验，它都发挥着至关重要的作用。

过渡组件动画

过渡组件可以使用 CSS 类名来定义元素在不同状态下的外观。最常用的类名是 enter-active-class、enter-from-class、enter-to-class、leave-active-class、leave-from-class 和 leave-to-class。

enter-active-class： 元素进入时激活的类名。
enter-from-class： 元素从何种状态进入时的类名。
enter-to-class： 元素进入到何种状态时的类名。
leave-active-class： 元素离开时激活的类名。
leave-from-class： 元素从何种状态离开时的类名。
leave-to-class： 元素离开到何种状态时的类名。

示例：元素进入时淡入动画

<transition name="fade">
  <div>元素内容</div>
</transition>

.fade-enter-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

多组件过渡

Vue.js 允许您使用 transition-group 组件为一组组件应用过渡。它会自动检测新旧组件的差异，并应用相应的过渡效果。

示例：列表项过渡

<transition-group name="list">
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</transition-group>

.list-enter-active {
  transition: transform 0.5s ease-in-out;
}

.list-enter-from {
  transform: translateX(-100%);
}

.list-enter-to {
  transform: translateX(0);
}

.list-leave-active {
  transition: transform 0.5s ease-in-out;
}

.list-leave-from {
  transform: translateX(0);
}

.list-leave-to {
  transform: translateX(100%);
}

列表过渡

在列表过渡中，过渡组件将监视列表中的变化，并根据需要应用过渡效果。Vue.js 支持两种类型的列表过渡：元素过渡和列表过渡。

元素过渡

元素过渡是指元素在列表中添加、删除或移动时的过渡效果。

列表过渡

列表过渡是指整个列表在添加、删除或移动项目时的过渡效果。

示例：元素过渡

<transition-group name="list">
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</transition-group>

.list-enter-active {
  transition: transform 0.5s ease-in-out;
}

.list-enter-from {
  transform: translateX(-100%);
}

.list-enter-to {
  transform: translateX(0);
}

.list-leave-active {
  transition: transform 0.5s ease-in-out;
}

.list-leave-from {
  transform: translateX(0);
}

.list-leave-to {
  transform: translateX(100%);
}

示例：列表过渡

<transition-group name="list">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</transition-group>

.list-enter-active {
  transition: transform 0.5s ease-in-out;
}

.list-enter-from {
  transform: translateY(100%);
}

.list-enter-to {
  transform: translateY(0);
}

.list-leave-active {
  transition: transform 0.5s ease-in-out;
}

.list-leave-from {
  transform: translateY(0);
}

.list-leave-to {
  transform: translateY(-100%);
}