У меня есть компонент профиля пользователя, и, используя Vue-Router и Vuex, я могу получать информацию о пользователях, получая параметр username в router-link, например, <router-link :to="{name: 'user', params: { username: 'some.username'}}"></router-link>, затем в beforeRouteEnter Навигационная защита Я звоню в одно из моих действий Vuex store, которое отправляет запросы AJAX, получает ответ и сохраняет его в моем состоянии, что обновляет пользовательский интерфейс для каждого пользователя. Довольно просто.
Однако теперь я хочу выполнять некоторые тонкие преобразования / переходы для некоторых элементов пользовательского интерфейса каждый раз, когда данные изменяются от пользователя к пользователю, но я не совсем понимаю, как это сделать.
ЗДЕСЬ МОЙ КОМПОНЕНТ ПРОФИЛЯ ПОЛЬЗОВАТЕЛЯ :
<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>
Теперь моя дилемма заключается в том, что всякий раз, когда выбираются данные нового пользователя и обновляется пользовательский интерфейс, я хочу добавить некоторые тонкие преобразования / переходы для элементов <v-avatar/> и `, возможно, масштаб или непрозрачность исчезают. Что-то вроде этот переход масштаба Tumblr:
