Vutify 공홈 방법을 써보려했지만.. 일단 실패

진입/진출 그리고 리스트 트랜지션 - Vue.js

transition-group 을 통한 Fade

<template>
  <v-container>
    <transition-group name="fade">
      <div v-for="(book, i) in [1,2,3,4,5,6,7,8,9,10]" :key="i">
	      <v-card>
					<v-list-item-title class="headline mb-1">
	          {{ book }}
	        </v-list-item-title>
				</v-card>
      </div>
    </transition-group>
  </v-container>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-enter {
  opacity: 0;
}
</style>

• loading 에니메이션으로 skeleton 사용

<template>
  <v-container>
    <transition-group name="fade">
      <div v-for="(book, i) in bookList" :key="i">
        <book-card :book="book" />
      </div>
    </transition-group>
  </v-container>

	<div v-if="loading">
    <div v-for="i in [1, 2, 3, 4, 5, 6, 7]" :key="i">
      <v-skeleton-loader
        class="skeleton"
        tile
        type="card-heading, list-item-two-line"
      />
    </div>
  </div>
</template>

<script>
import { getBooks } from "@/api/index";
import BookCard from "./BookCard.vue";

export default {
  components: { BookCard },
  data: () => ({
    bookList: [],
  }),
  async created() {
    window.addEventListener("scroll", () => {
      this.reachBottom = this.bottomVisible();
    });
    const { data } = await getBooks();
    this.bookList = [...this.bookList, ...data];
  },
};
</script>

<style lang="scss" scoped>
.skeleton {
  max-width: 700px;
  margin: auto;
  margin-top: 1px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  & > :first-child {
    height: 40px;
  }
  & > :last-child {
    height: 64px;
  }
}

.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-enter {
  opacity: 0;
}
</style>

NEXT SETP : Infinity Scroll