[Vue 스터디 #7] Transition

Transition

• vue에서 제공하는 기본 애니메이션 컴포넌트
• v-if, v-show, component 토글(?)에 의해서만 동작됨

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<template>
  <button @click="show = !show">토글</button>
  <Transition>
    <p v-if="show">안녕</p>
  </Transition>
    <Transition name="other">
    <p v-if="!show">안녕 반대</p>
  </Transition>
</template>

<style>
.other-enter-from {
  transform: translateY(-30px);
}

.other-enter-to {
  transform: translateX(10px);
}

.other-enter-active,
.other-leave-active {
  transition: all 0.5s ease;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

실행가능 링크

TransitionGroup

• 컴포넌트가 v-for 을 통해 목록에 삽입, 제거등을 실행할 때 사용되는 애니메이션 컴포넌트
• v-for 안의 요소에 TransitionGroup 를 추가해야 적용 가능

  <script>
  

const getInitialItems = () => [1, 2, 3, 4, 5]
let id = getInitialItems().length + 1

export default {
data() {
return {
items: getInitialItems()
}
},
methods: {
insert() {
const i = this.items.length +1;
this.items.push(i)
},
reset() {
this.items = getInitialItems()
id = getInitialItems().length + 1
}
}
}

```