CODEWITHSUNDEEP
javascriptanimationvue.jstransitioncss-transforms
Robert Tillman
Robert Tillman

Reputation: 1013

Animating/Transitioning elements in Vue JS

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:

enter image description here

Upvotes: 3

Views: 450

Answers (1)

Ru Chern Chong
Ru Chern Chong

Reputation: 3756

You can wrap the <transition></transition> tag around your <v-avatar></v-avatar> tag. Also remember to set a key for your <v-avatar/> tag.

For example:

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

This is to ensure that the transition is triggered on each data change.

More about transitions for Vue can be found at the docs.

Upvotes: 4

Related Questions