Vue JS中的动画/转换元素

Question

我有一个用户配置文件组件，并利用Vue-Router和Vuex，我能够通过抓住username中的router-link参数来获取用户信息，例如，<router-link :to="{name: 'user', params: { username: 'some.username'}}"></router-link>然后在beforeRouteEnter导航警卫我打电话给我发送的一个Vuex商店行动一个AJAX请求，抓取响应并将其存储在我的状态，这会更新每个用户的UI。非常直截了当。

但是，我现在想要在每次将数据从用户更改为用户时对某些UI元素执行一些细微的转换/转换，但我对如何执行此操作感到困惑。

这是我的用户配置文件组件：

<template>
    <v-container fluid>
      <v-layout justify-center>
        <v-flex v-if="user.data">
          <v-avatar :size="100px" >
            <img :src="user.data.img" alt="avatar">
          </v-avatar>
          <p>Hello, You Are {{ user.data.name }}</p>    
        </v-flex>
      </v-layout>
    </v-container>
</template>

<script>
  import store from './vuex'
  import { mapGetters } from 'vuex'

  export default {
  ...
  beforeRouteEnter (to, from, next) {
   // call vuex ajax action to get user data and update state
  next()
  },
  beforeRouteUpdate (to, from, next) {
  // call vuex ajax action to get user data and update state
  next()
  },
  beforeRouteLeave (to, from , next) {
   // call vuex action to clear user state data
  next()
  }
  computed: {
   ...mapGetters({ user : 'core/user' })
  },
  }
</script>

现在，我的困境是，每当获取新用户的数据并更新UI时，我想在<v-avatar/>和`元素上添加一些微妙的变换/过渡，可能是缩放或不透明度淡入。像这样的tumblr缩放过渡：

Answer 1

你可以在你的<transition></transition>标签周围包装<v-avatar></v-avatar>标签。还记得为你的<v-avatar/>标签设置一个键。

例如：

<v-avatar :key="user.name.data"></v-avatar>

这是为了确保在每次数据更改时触发转换。

有关Vue过渡的更多信息，请访问docs。