Vue运用transition实现过渡动画

下面是“Vue运用transition实现过渡动画”的完整攻略。

一、transition基本概念

在Vue中使用<transition>组件可以优雅地实现过渡动画效果。<transition>组件是Vue内置的过渡动画组件。它可以在元素显示、隐藏、插入和删除时，根据设置的动画属性进行动画过渡。

<transition>组件包裹的元素，如果需要过渡时，可以设置以下4个状态：

• enter：进入动画前状态。
• enter-active：进入动画时状态。
• leave：离开动画前状态。
• leave-active：离开动画时状态。

过渡模式

<transition>组件有两种过渡模式：in-out和out-in。

• in-out：设置过渡时间后，元素先执行进入动画，动画结束后，再执行离开动画，这是默认的过渡模式。
• out-in：元素执行离开动画，动画结束后，再执行进入动画。

二、transition实现过渡动画的具体步骤

1. 在组件内声明<transition>组件。
2. 给<transition>组件设置过渡动画属性。
3. 在需要过渡动画的元素上添加v-show或v-if等Vue指令控制元素显隐。

示例1：元素显隐过渡

下面是一个基本示例代码，实现了一个简单的文本框元素的显隐动画过渡效果。

<template>
  <div>
    <button @click="show=!show">点击显示/隐藏</button>
    <transition name="fade">
      <p v-if="show">这是一个文本框</p>
    </transition>
  </div>
</template>

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

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

上面代码中，<transition>组件的name属性设置为fade，表示这是一个淡入淡出效果的动画过渡。<p>标签内使用了v-if指令控制其显隐，属性值为show，接着在data()函数中定义了show初始值为false，意味着文本框一开始是隐藏的。最后是CSS样式，通过opacity属性来控制元素的透明度。当动画过渡时，opacity的值在0到1之间变化，就会出现淡入淡出的效果。

示例2：列表过渡

下面是一个列表过渡的示例代码，实现了一个商品列表的动态添加和删除效果。

<template>
  <div>
    <button @click="addItem">添加商品</button>
    <ul>
      <transition-group name="list" tag="ul">
        <li v-for="(item, index) in items" :key="index">
          {{ item }}
          <button @click="removeItem(index)">删除</button>
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["商品1", "商品2", "商品3"]
    };
  },
  methods: {
    addItem() {
      this.items.push(`商品${this.items.length + 1}`);
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

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

上面的代码中，使用了<transition-group>组件将<li>元素包裹起来，其name属性值为list，表示这是一个列表过渡动画。标签名设置为ul，意味着过渡动画元素是<ul>标签。在v-for指令中遍历了items数组，为每个数组元素设置了一个<li>标签，使用key属性来绑定每个元素的唯一标识，以便于<transition-group>组件知道哪个元素应该添加到或移除出列表。<li>标签内的删除按钮绑定了removeItem()函数，实现了元素的删除效果。最后是CSS样式，通过opacity和transform属性来实现元素的淡入淡出和移动效果，过渡时间为0.5秒，效果更加平滑自然。

到这里，我们就讲解完了“Vue运用transition实现过渡动画”的完整攻略，希望对你有帮助。