vue2.0 中使用transition实现动画效果使用心得

当我们需要在Vue实现视觉上的动画效果时，通常需要在template中使用<transition>组件来管理动画过程，并结合CSS的transition属性来实现具体的动画效果。以下是使用<transition>实现动画效果的详细攻略：

1. 添加Vue组件

首先，我们需要在Vue组件中添加<transition>组件，如下所示：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, world</p>
    </transition>
  </div>
</template>

这个简单的组件包含了一个按钮和一个段落文字。当按钮被点击时，show变量的值会被取反，同时<p>标签的显示状态也会发生相应的变化。

2. 添加CSS样式

接下来，我们需要在CSS中定义fade类名对应的过渡效果。这里，我们定义了一个简单的淡入淡出效果：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

这里，fade-enter-active和fade-leave-active类名对应于组件在进入和离开过程中执行的过渡效果。fade-enter和fade-leave-to类名分别对应于组件进入和离开的初始和结束状态。这些类名与<transition>组件的name属性相对应，因此在这里我们将name属性设置为fade。

3. 添加JavaScript代码

最后，我们需要在Vue组件中添加一些简单的JavaScript代码，以便在过渡过程中添加一些类名：

export default {
  data () {
    return {
      show: false
    }
  }
}

这里，show变量的值会在点击按钮时被取反，从而实现组件的显示和隐藏。

示例1：使用transition实现列表元素的进入效果

下面是一个示例，展示了如何使用<transition>实现列表元素的进入效果。在这个示例中，当列表元素显示时，它们会沿着Y轴从上往下运动：

<template>
  <div>
    <ul>
      <transition-group name="list" tag="ul">
        <li v-for="(item, index) of list" :key="index">
          {{ item }}
        </li>
      </transition-group>
    </ul>
    <button @click="add">Add new item</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    add () {
      this.list.push(`Item ${this.list.length + 1}`)
    }
  }
}
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: transform .5s;
}

.list-enter, .list-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}
</style>

这里需要注意的是，我们使用了<transition-group>标签来将多个列表元素组合成一个整体进行过渡动画，同时使用了tag="ul"属性将其渲染成一个<ul>标签。

示例2：使用transition实现对话框的出现和消失效果

下面是一个示例，展示了如何使用<transition>实现对话框的出现和消失效果。在这个示例中，当用户单击一个按钮时，对话框会淡入显示；当用户单击对话框中的关闭按钮时，对话框会淡出消失：

<template>
  <div>
    <button @click="show = !show">Toggle dialog</button>
    <transition name="fade">
      <div v-if="show" class="dialog">
        <h2>Dialog title</h2>
        <p>Dialog content here</p>
        <button class="close" @click="show = false">Close</button>
      </div>
    </transition>
  </div>
</template>

<style>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.dialog .close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

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

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

在这个示例中，我们将对话框的位置固定在页面中间，并使用了CSS的transform属性来进行居中对齐。我们还添加了一个关闭按钮来实现对话框的消失效果。如此一来，我们就可以轻松地在Vue中实现对话框的出现和消失动画效果了。