vue 组件中使用 transition 和 transition-group实现过渡动画

下面是详细讲解“vue 组件中使用 transition 和 transition-group实现过渡动画”的完整攻略：

1. Vue 中的过渡动画

Vue 提供了一套内置的过渡和动画系统，可以方便地在组件切换和元素增删时添加过渡效果。在组件中使用过渡动画需要使用两个组件：<transition> 和 <transition-group>。

1.1. <transition> 组件

<transition> 组件可以在元素从 DOM 中插入或者撤下时设置动画效果。使用 <transition> 组件可以很方便地添加进入和离开动画效果。

<transition> 组件有以下属性：

• name：用于设置动画的名称，该属性必须设置。通常设置为一个 class 名称。
• appear：设置是否在初始渲染时执行动画。
• duration：设置过渡动画的持续时间。
• enter-class：设置进入动画的 CSS class。
• enter-active-class：设置进入动画的过渡状态的 CSS class。
• leave-class：设置离开动画的 CSS class。
• leave-active-class：设置离开动画的过渡状态的 CSS class。
• type：设置过渡类型，可以为 transition 或 animation。

下面是一个使用 <transition> 组件设置进入和离开动画的例子：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-if="show">Hello World</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

<style>
.fade-enter-active {
  transition: opacity 0.5s ease-out;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 0.5s ease-in;
}
.fade-leave-to {
  opacity: 0;
}
</style>

在上面的代码中，当点击 Toggle 按钮时，<div> 元素会通过设置进入和离开动画过渡。在 style 标签中定义了 .fade-enter-active、.fade-enter、.fade-leave-active、.fade-leave-to 四个 CSS class，分别表示进入过渡状态的样式、进入动画样式、离开过渡状态的样式、离开动画样式。

1.2. <transition-group> 组件

<transition-group> 组件能够在多个元素同时进行过渡时设置动画效果。

<transition-group> 组件有以下属性：

• name：用于设置动画的名称，该属性必须设置。通常设置为一个 class 名称。
• tag：用于设置过渡元素的标签，默认为 'span'。
• appear：设置是否在初始渲染时执行动画。
• duration：设置过渡动画的持续时间。
• enter-class：设置进入动画的 CSS class。
• enter-active-class：设置进入动画的过渡状态的 CSS class。
• leave-class：设置离开动画的 CSS class。
• leave-active-class：设置离开动画的过渡状态的 CSS class。
• move-class：设置移动动画的 CSS class。

下面是一个使用 <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, index) in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" }
      ]
    };
  },
  methods: {
    add() {
      this.items.push({ id: Date.now(), text: "NewItem" });
    },
    remove() {
      this.items.pop();
    }
  }
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease-out;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

在上述代码中，<transition-group> 标签包含一个 v-for 循环，用于创建一组带有过渡动画的列表项。在 style 标签中定义了 .list-enter-active、.list-enter、.list-leave-active、.list-leave-to 四个 CSS class，表示列表项进入过渡状态的样式、进入动画样式、离开过渡状态的样式、离开动画样式。当添加或删除列表项时，该列表项会有对应的过渡动画。

2. Vue 组件中使用 transition 和 transition-group 实现过渡动画的步骤

使用 transition 和 transition-group 实现过渡动画的步骤如下：

1. 在组件中引入 transition 和 transition-group 组件。
2. 在模板中使用 transition 或 transition-group 标签包裹需要添加动画的元素或组件。
3. 在 transition 或 transition-group 标签上设置相应的属性，如 name、duration、appear、enter-class、enter-active-class、leave-class、leave-active-class、type 等。
4. 在 style 标签中为每个过渡状态或动画定义相应的 CSS class。

3. 示例

下面是两个示例，分别使用 transition 和 transition-group 实现过渡动画效果。

3.1. 使用 transition 实现过渡动画

在以下示例中，我们在组件 Fade 中使用 <transition> 组件创建一个过渡动画，为所有的动画类型使用了同样的 CSS Class。在 style 标签中定义了 .fade-enter-active、.fade-enter、.fade-leave-active、.fade-leave-to 四个 CSS class，表示进入和离开动画时的过渡状态和 CSS 样式。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

3.2. 使用 transition-group 实现过渡动画

在以下示例中，我们在组件 List 中使用 <transition-group> 组件创建一个过渡动画，实现了多个子元素同时过渡的效果。在 style 标签中定义了 .list-enter-active、.list-enter-to、.list-leave-active、.list-leave-to 四个 CSS class，表示进入和离开动画时的过渡状态和 CSS 样式。

<template>
  <div>
    <button @click="add">Add Item</button>
    <button @click="remove">Remove Item</button>
    <transition-group name="list">
      <div v-for="item in list" :key="item">{{ item }}</div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["Item 1", "Item 2", "Item 3"]
    };
  },
  methods: {
    add() {
      this.list.push(`Item ${this.list.length + 1}`);
    },
    remove() {
      this.list.pop();
    }
  }
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease-out;
}
.list-enter-to {
  opacity: 1;
  transform: translateY(0);
}
.list-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
</style>

以上就是使用 transition 和 transition-group 实现过渡动画的完整攻略。