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

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

1. 什么是 Vue 过渡效果与动画 transition

Vue 过渡效果与动画 transition 是 Vue.js 提供的用于实现页面过渡效果和动画的功能。通过在元素上添加 CSS 类名的形式，可以实现各种过渡效果和动画效果。这些效果包括渐变、平移、旋转、缩放等。

在 Vue 中，过渡效果与动画 transition 可以在元素插入、更新、移除等不同状态的时候触发，并设置相应的 CSS 类名实现动画效果。

2. 使用示例1：淡入淡出效果

示例代码如下：

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="fade">
      <p v-if="show">这是一段文本</p>
    </transition>
  </div>
</template>

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

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

详解步骤：
1. 在 HTML 模板中，先定义一个按钮用于切换文本的显示与隐藏。
2. 使用 <transition> 标签将需要过渡的元素包裹起来。这里使用了 name 属性命名过渡效果为 "fade"。
3. 使用 v-if 指令根据 show 数据的值来控制文本的显示与隐藏。
4. 在 <style> 标签中使用 scoped 属性，使得样式仅在当前组件中生效，不会影响到其他组件。
5. 定义过渡效果需要的 CSS 类名。在示例中，使用 .fade-enter-active 和 .fade-leave-active 类来定义过渡效果的持续时间，这里是 0.5 秒；使用 .fade-enter 和 .fade-leave-to 类来定义元素进入和离开时的初始和最终样式。

3. 使用示例2：滑动效果

示例代码如下：

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="slide">
      <p v-if="show" class="box">这是一个盒子</p>
    </transition>
  </div>
</template>

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

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
</style>

详解步骤：
1. 在 HTML 模板中，先定义一个按钮用于切换盒子的显示与隐藏。
2. 使用 <transition> 标签将需要过渡的盒子元素包裹起来。这里使用了 name 属性命名过渡效果为 "slide"。
3. 使用 v-if 指令根据 show 数据的值来控制盒子的显示与隐藏。
4. 在 <style> 标签中使用 scoped 属性，使样式仅在当前组件中生效，不会影响到其他组件。
5. 定义过渡效果需要的 CSS 类名。在示例中，使用 .slide-enter-active 和 .slide-leave-active 类来定义过渡效果的持续时间，这里是 0.5 秒；使用 .slide-enter 和 .slide-leave-to 类来定义盒子进入和离开时的初始和最终样式，通过 transform 属性控制盒子的水平滑动效果。
6. 使用 .box 类定义盒子的样式，包括宽度、高度和背景颜色。

通过以上两个示例，你可以学会如何使用 Vue 的过渡效果与动画 transition。根据具体需求，可以灵活运用不同的 CSS 类名和样式来实现各种过渡效果和动画效果。