详解vue过度效果与动画transition使用示例

详解Vue过渡效果与动画Transition使用示例

在Vue中，为了使UI更加友好、动态，我们可以使用过度效果和动画来实现许多炫酷的效果。Vue提供了<transition>和<transition-group>两个组件，用于在DOM元素插入和删除时自动应用过渡效果和动画。

<transition>组件

<transition>组件用于在一个元素插入或移除DOM时应用过渡效果。它包裹的元素可以是任何Vue组件或原生HTML元素。

以下是一个简单的示例，演示了<transition>组件的基本语法和用法：

<template>
  <div>
    <button @click="visible = !visible">Toggle Visibility</button>

    <transition name="fade">
      <p v-if="visible">Hello World!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在这个示例中，我们使用了<transition>组件包裹了一个<p>元素，当visible属性为true时，<p>元素会显示，并且会应用名为“fade”的过渡效果。当visible属性变为false时，<p>元素会从DOM中移除，并且同样会应用名为“fade”的过渡效果。

我们还定义了一些CSS规则来定义“fade”过渡效果。.fade-enter-active、.fade-leave-active定义了过渡生效时的样式，.fade-enter、.fade-leave-to定义了过渡初始和完成时的样式。在这个示例中，我们定义了一个淡入淡出的效果，通过改变元素的透明度来实现。

<transition-group>组件

<transition-group>组件用于在多个元素插入或移除DOM时应用过渡效果和动画。与<transition>组件不同的是，<transition-group>组件监听的是数组变化。

以下是一个简单的示例，演示了<transition-group>组件的基本语法和用法：

<template>
  <div>
    <button @click="add">Add Item</button>
    <button @click="remove">Remove Item</button>

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
      ],
      nextId: 4,
    };
  },

  methods: {
    add() {
      this.list.push({ id: this.nextId++, text: `Item ${this.nextId}` });
    },

    remove() {
      this.list.pop();
    },
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

在这个示例中，我们使用了<transition-group>组件包裹了一个列表，当列表中的元素变化时，会应用名为“list”的过渡效果。我们定义了一些CSS规则来定义“list”过渡效果，这个过渡效果会在元素插入和删除时应用。

总之，Vue的过渡效果和动画非常强大，可以让我们的UI更加生动，提升用户体验。通过学习<transition>和<transition-group>组件的用法，可以方便我们实现各式各样的过渡效果和动画。