vue动画之点击按钮往上渐渐显示出来的实例

下面就是详细讲解“vue动画之点击按钮往上渐渐显示出来的实例”的完整攻略：

1. 理解基本动画原理

在 Vue 中实现动画可以使用 Vue 提供的 transition 组件。Vue 的过渡效果依赖于 CSS3 过渡和动画，我们可以通过添加一些 CSS3 的类来定义动画效果，例如 fade-enter、fade-enter-active、fade-leave 和 fade-leave-active。具体原理如下：

• 进入动画：在元素插入或者启用 v-show 之后立即添加一个 CSS 类名，接着下一帧，添加另一个（用于定义过渡的过程）。
• 离开动画：在触发离开动画的元素上添加 v-leave 类名，并在下一帧移除元素。

2. 实现点击按钮往上渐渐显示出来的实例

接下来我们使用 Vue 实现一个点击按钮往上渐渐显示的动态效果。在实现此需求时，我们会使用到以下几个 Vue 模板指令：

• v-if：控制元素的显示与隐藏；
• v-on：绑定事件监听器；
• v-transition：使用 Vue 的过渡效果组件；

示例一：

下面是一个最基本的示例，含有一个按钮和一个文本块，点击按钮后，文本块向上渐渐显示出来：

<template>
  <div>
    <button v-on:click="show = !show">点击显示</button>
    <transition name="fade">
      <div v-if="show">Hello，这里是文本块！</div>
    </transition>
  </div> 
</template>

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

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

示例二：

下面是一个稍微复杂一点的示例，含有两个按钮和两个文本块，当第一个按钮被点击时，文本块一出现、文本块二消失；当第二个按钮被点击时，文本块一消失、文本块二出现：

<template>
  <div>
    <button v-on:click="show1 = true; show2 = false">显示文本块1</button>
    <button v-on:click="show1 = false; show2 = true">显示文本块2</button>
    <transition name="fade">
      <div v-if="show1">Hello，这里是文本块1！</div>
      <div v-if="show2">Hello，这里是文本块2！</div>
    </transition>
  </div> 
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false
    };
  }
};
</script>

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

以上就是“vue动画之点击按钮往上渐渐显示出来的实例”的完整攻略。