Vue.js 过渡 & 动画

1. 基本用法

<transition> 是 Vue.js 中用于为元素和组件的进入、离开状态提供过渡效果的一个组件。它允许你在这些状态变化时应用 CSS动画或过渡效果。

使用 <transition> 组件<transition> 组件用于包裹需要动画效果的元素。它会在元素的进入和离开过程中自动添加和移除 CSS 类。

javascript 复制代码

<template>
  <div id="app">
    <button @click="show = !show">
      {{ show ? '隐藏' : '显示' }} 按钮
    </button>
    
    <transition name="fade">
      <p v-if="show" class="fade">这是一个可见的段落！</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to { /* 适用于 Vue 2.1.8 及以上版本 */
  opacity: 0;
}
</style>

说明

按钮: 点击按钮可以切换 show 状态，从而控制段落的显示与隐藏。
: 用于包裹需要进行过渡效果的元素（这里是 <p> 标签）。

CSS 类定义:

.fade-enter-active 和 .fade-leave-active 用于定义过渡效果的持续时间和缓动。
.fade-enter 和 .fade-leave-to 控制元素在进入和离开时的不透明度。

2. CSS 过渡类

自动生成的类当你使用 <transition> 组件时，Vue 会根据指定的 name 属性自动生成一套 CSS 类。这些类包括：

name-enter: 元素进入时的初始状态。
name-enter-active: 元素进入时的过渡状态。
name-leave: 元素离开时的初始状态。
name-leave-active: 元素离开时的过渡状态。

以下是一个简单的 fade 过渡效果的 CSS 实现：

javascript 复制代码

css
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to { /* 适用于 Vue 2.1.8 及以上版本 */
  opacity: 0;
}

3. JavaScript 动画

对于更复杂的动画效果，可以使用 JavaScript 钩子函数来控制过渡。可以在以下事件中执行自定义逻辑：

@before-enter: 在元素进入前调用。
@enter: 在元素进入时调用。
@leave: 在元素离开时调用。

示例代码

javascript 复制代码

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <p v-if="show">Hello, Vue.js!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0; // 设置初始透明度
    },
    enter(el, done) {
      el.offsetHeight; // 触发 reflow
      el.style.transition = 'opacity 0.5s';
      el.style.opacity = 1; // 设置最终透明度
      done(); // 调用完成回调
    },
    leave(el, done) {
      el.style.transition = 'opacity 0.5s';
      el.style.opacity = 0; // 设置离开时透明度
      done(); // 调用完成回调
    }
  }
};
</script>

4. 过渡组 (Transition Group)

如果需要对列表中的项进行动画处理，可以使用 <transition-group> 组件。该组件允许你对数组变化（如添加、删除和重新排序）进行动画处理。

javascript 复制代码

<template>
  <div>
    <button @click="add">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    add() {
      const newItem = { id: Date.now(), text: 'New Item' };
      this.items.push(newItem);
    }
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter, .list-leave-to { /* 适用于 Vue 2.1.8 及以上版本 */
  opacity: 0;
  transform: translateY(30px); /* 向下移动 */
}
</style>

5. 总结

使用 : 通过包裹元素来实现进入和离开的过渡效果。
定义 CSS 类: 根据 Vue 自动生成的类设置过渡效果。
JavaScript 钩子: 自定义过渡逻辑以实现更复杂的动画效果。
使用 : 对列表项的添加、删除和排序进行动画处理。