Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Getting a List of Files Using the Dropbox API Chapter 4

<transition name="fade">

<div v-if="isLoading">Loading...</div>

</transition>

<transition name="fade">

<ul v-if="!isLoading">

<li v-for="entry in structure">

<strong>{{ entry.name }}</strong>

<span v-if="entry.size">- {{

bytesToSize(entry.size) }}</span>

</li>

</ul>

</transition>

</div>

</script>

Now add the following CSS to either the head of your document or a separate style sheet if

you already have one:

.fade-enter-active,

.fade-leave-active {

transition: opacity .5s

}

.fade-enter,

.fade-leave-to {

opacity: 0

}

With the transition element, Vue adds and removes various CSS classes based on the state

and time of the transition. All of these begin with the name passed in via the attribute and
are appended with the current stage of transition: