[Vue.js] transition-group 수직 스크롤을 실현하는 카셀

완성형

목록을 세로로 자동으로 전환하는 칸을 만들고 싶습니다.
css 화이팅 안 해.js의transtion으로만 실현하고 싶습니다.

일단 블루.js에 목록 보이기

index.vue

<template>
  <div class="fruit">
    <span v-for="item in items" :key="item.id" class="fruit__list__item">{{ item.title }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: "apple" },
        { id: 2, title: "banana" },
        { id: 3, title: "orange" },
        { id: 4, title: "peach" },
        { id: 5, title: "plum" },
        { id: 6, title: "grape" }
      ]
    };
  }
};
</script>

마지막으로 세 개를 표시합니다. 어쨌든 모두 v-for로 표시합니다.

목록 이동을 위한 Vue 프로세스 추가

index.vue

<template>
　　<!-- itemsをshowItemに変更。他箇所は略。 -->
　　<span v-for="item in showItem" :key="item.id" class="fruit__list__item">{{ item.title }}</span>
</template>

<script>
export default {
 // （略）
  created() {
    this.scrollUp();
  },
  computed: {
    showItem() {
      return this.items.slice(0, 3);
    }
  },
  methods: {
    scrollUp() {
      window.setInterval(() => {
        this.items = this.items.concat(this.items.shift());
      }, 2000);
    }
  }
};
</script>

인스턴스 생성 후 한 번만 수행created

scrollUp에서 배열의 0번째를 삭제하고 배열의 뒤에 연결하여 무한 스크롤

scrollUp에서 scrollUp, 2초마다 정렬 변경

setInterval 정렬된 0~3번째 3개만 표시

이렇게 되면 매끄러운 동작 외에 이루고 싶은 동작도 이뤄진다.

동작을 매끄럽게 하다

목록을 showItem로 바꿉니다.
index.vue

<template>
  <div class="fruit">
    <transition-group name="fruit-list" tag="p" class="fruit__list">
      <span v-for="item in showItem" :key="item.id" class="fruit__list__item">{{ item.title }}</span>
    </transition-group>
  </div>
</template>

style.scss

.fruit {
  &__list {
    display: flex;
    flex-direction: column;

    &__item {
      margin: 5px;
      padding: 5px;
      border: 1px solid;
      transition: all 1s;
    }
  }

  &-list-enter {
    opacity: 0;
    transform: translateY(35px);
  }

  &-list-leave-to {
    opacity: 0;
    transform: translateY(-35px);
  }

  &-list-leave-active {
    position: absolute;
  }
}

transion 부분은 거의 공식과 같기 때문에 자세히 그쪽을 참조하세요.
주의점transition-group에서 지정하지 않으면v-leave-active첫 번째 요소는 위로 이동하더라도 후속 요소를 따르지 않습니다.

주의

index.vue

<transition-group name="fruit-list" tag="p" class="fruit__list">
    <span v-for="(item, index) in showItem" :key="index" class="fruit__list__item">{{ item.title }}</span>
</transition-group>

키를 v-for index로 지정하면 오류가 발생합니다.
처음 해봤어요.position: absoluteindex가 아닙니다. item의 id 등으로 지정해야 합니다.

참고 자료

과도반-Vue.js

목록 이동 점프.js