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. 总结

  1. 使用 : 通过包裹元素来实现进入和离开的过渡效果。
  2. 定义 CSS 类: 根据 Vue 自动生成的类设置过渡效果。
  3. JavaScript 钩子: 自定义过渡逻辑以实现更复杂的动画效果。
  4. 使用 : 对列表项的添加、删除和排序进行动画处理。
相关推荐
musk12126 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘35 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref