Animating/Transitioning Vue JS 中的元素

Question

我有一个用户配置文件组件，利用 Vue-Router 和 Vuex，我能够通过获取 router-link 中的 username 参数来获取用户信息，例如,<router-link :to="{name: 'user', params: { username: 'some.username'}}"></router-link> 然后在 beforeRouteEnter 导航守卫中我调用我的 Vuex 存储操作之一发送 AJAX 请求，获取响应并将其存储在我的状态，它会为每个用户更新 UI。非常简单。

但是，我现在想在每次数据从一个用户更改到另一个用户时对一些 UI 元素执行一些微妙的 transforms/tansitions，但我对如何去做感到困惑.

这是我的用户个人资料组件：

<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/> 和 ` 元素上添加一些微妙的 transforms/transitions，也许比例或不透明度淡入。像这样的 tumblr 比例转换：

Answer 1

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

例如：

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

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

有关 Vue 转换的更多信息，请访问 docs。

Animating/Transitioning Vue JS 中的元素

Animating/Transitioning elements in Vue JS

javascript

animation

transition

css-transforms

vue.js