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. 使用 : 对列表项的添加、删除和排序进行动画处理。
相关推荐
别拿曾经看以后~40 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死43 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter