Vue 动画效果、过渡效果的示例代码

下面是详细讲解Vue动画效果、过渡效果的示例代码的攻略。

准备工作

在开始讲解之前，需要保证已经安装好Vue.js框架。另外，为了方便案例演示，我们需要借助Vue的官方库vue-router完成路由跳转。

首先，我们需要创建Vue项目，在项目中安装vue-router：

// 创建Vue项目
vue create my-project

// 安装vue-router
npm install vue-router --save

然后，在main.js文件中引入并使用vue-router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

例子一：渐入渐出效果

假设我们有一个网站首页，用户可以通过点击导航栏访问不同的页面，我们希望页面跳转时能够添加动画效果。

首先，在router/index.js文件中配置页面路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

然后，在App.vue文件中使用<router-view>标签渲染路由页面。为了实现页面渐入渐出的效果，我们需要借助Vue的过渡效果。

在App.vue文件中添加如下代码：

<template>
  <div id="app">
    <header>
      <!-- 导航栏 -->
    </header>
    <main>
      <!-- 动态内容 -->
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </main>
    <footer>
      <!-- 页脚 -->
    </footer>
  </div>
</template>

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

<script>
export default {
  name: 'App',
  data() {
    return {}
  }
}
</script>

在上面的代码中，我们使用Vue的<transition>标签包裹了<router-view>标签，在<transition>标签中设置了name和mode属性，name用于指定过渡效果的名称，mode用于指定过渡模式。

然后，我们在<style>标签中定义了名为fade的过渡效果，使用opacity属性实现渐变效果。

这样，在页面跳转时，就可以看到页面渐入渐出的动画效果。

例子二：列表插入效果

假设我们有一个页面，其中包含一个列表，在用户向列表中添加数据时，我们希望新数据能够以插入的动画效果出现。

首先，在List.vue文件中渲染数据列表：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  }
}
</script>

然后，在App.vue文件中添加一个可以向列表中添加数据的按钮，点击按钮时向列表中加入一条新数据。

<template>
  <div id="app">
    <button @click="addItem">添加数据</button>
    <List></List>
  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    List
  },
  data() {
    return {}
  },
  methods: {
    addItem() {
      this.$refs.list.items.push('D')
    }
  }
}
</script>

接下来，我们需要使用Vue的过渡效果实现插入效果。在List.vue文件中，为每一个列表项添加过渡效果。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" ref="listItem">
      <transition name="list">
        <div>{{ item }}</div>
      </transition>
    </li>
  </ul>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all .5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translatex(100%);
}
</style>

<script>
export default {
  name: 'List',
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  }
}
</script>

在上面的代码中，我们为每一个列表项包裹了一个<transition>标签，并为标签设置了name属性，同时为<style>标签中定义了名为list的过渡效果。

这里的过渡效果使用了Vue的动画类名，当新的数据项插入到列表中时，会触发list-enter和list-enter-active类的动画效果，实现了插入效果。

至此，我们通过两个例子详细讲解了Vue的动画效果、过渡效果的示例代码的完整攻略。