I have a Users Profile Component, and utilizing Vue-Router and Vuex, Im able to fetch a users information by grabbing the username param in a router-link e.g.,<router-link :to="{name: 'user', params: { username: 'some.username'}}"></router-link> then in a beforeRouteEnter navigation guard i make a call to one of my Vuex store actions that sends an AJAX requests, grabs the response and stores it in my state, which updates the UI for every User. Pretty straightforward.
However, I now want to perform some subtle transforms/tansitions to some of the UI elements every time the data is changed from user to user, but im confused on how to go about doing so.
HERE IS MY USER PROFILE COMPONENT:
<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>
Now, my dilemma is, whenever a new user's data is fetched and the UI is updated, I want to add some subtle transforms/transitions on the <v-avatar/> and ` elements, maybe a scale or opacity fade in. Something like this tumblr scale transition:
