Animate List

For Loop에서 여러 개의 element에 대해서 각각의 transition을 주기 위해서는 다른 방식으로 접근해야한다.

이럴 때, 사용하는 것이 transition-group이다.

 

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <button @click="addItem">Add</button>
  <ul>
    <transition-group name="fade">
      <li v-for="(number, index) in numbers" :key="number" @click="removeItem(index)">{{ number }}</li>
    </transition-group>
  </ul>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flag: true,
      numbers: [1, 2, 3, 4, 5],
    }
  },
  methods: {
    addItem() {
      const num = Math.floor(Math.random() * 100 + 1);
      const index = Math.floor(Math.random() * this.numbers.length);
      this.numbers.splice(index, 0, num);
    },
    removeItem(index) {
      this.numbers.splice(index, 1);
    }
  }
}
</script>

<style>
li {
  font-size: 22px;
  cursor: pointer;
}

 .fade-enter-from {
   opacity: 0;
 }

.fade-enter-active {
  transition: all 0.25s linear;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-active {
  transition: all 0.25s linear;
  position: absolute;
}

.fade-leave-to {
  opacity: 0;
}

.fade-move {
  transition: all 1s linear;
}
</style>