Transition & Animation

λ·°λŠ” 라이브러리 λ‚΄λΆ€μ μœΌλ‘œ νŠΈλžœμ§€μ…˜, μ• λ‹ˆλ©”μ΄μ…˜ κΈ°λŠ₯을 κ°–κ³  μžˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ κ°„λ‹¨ν•œ κ·œμΉ™κ³Ό μ†μ„±λ“€λ§Œ μ•Œλ©΄ μ‰½κ²Œ 멋진 μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

νŠΈλžœμ§€μ…˜ μ˜ˆμ‹œ

λ·° νŠΈλžœμ§€μ…˜ μ½”λ“œλ₯Ό κ°„λ‹¨νžˆ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

<div>
  <button @click="showComment">show</button>
  <transiton name="fade">
    <p v-if="status">This is a comment</p>
  </transiton>
</div>
new Vue({
  ...
  data: {
    status: false
  },
  methods: {
    showComment() {
      this.status = true;
    }
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

μœ„ μ½”λ“œμ—μ„œ show λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ This is a comment λΌλŠ” ν…μŠ€νŠΈκ°€ λΆ€λ“œλŸ½κ²Œ μ‚΄λ©°μ‹œ ν‘œμ‹œλ©λ‹ˆλ‹€. μ—¬κΈ°μ„œ μ£Όλͺ©ν•  μ½”λ“œλŠ” <transition>μ΄λΌλŠ” νƒœκ·Έμž…λ‹ˆλ‹€.

<transition> νƒœκ·ΈλŠ” name 속성을 κ°–κ³  있고, ν•΄λ‹Ή name 속성과 μ—°κ΄€λœ CSS μ½”λ“œκ°€ μœ„μ— μ •μ˜λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. CSS μ½”λ“œμ— λ”°λΌμ„œ ν…μŠ€νŠΈκ°€ ν‘œμ‹œλ  λ•Œ opacity의 값이 λ³€ν™”λ˜κ³ , 이에 따라 μ‚΄λ©°μ‹œ λ‚˜νƒ€λ‚˜λŠ” 효과λ₯Ό λ³Ό μˆ˜κ°€ μžˆμŠ΅λ‹ˆλ‹€.

νŠΈλžœμ§€μ…˜ 클래슀

μ•žμ˜ μ½”λ“œμ—μ„œ νŠΈλžœμ§€μ…˜ νš¨κ³Όκ°€ λ‚˜νƒ€λ‚  수 μžˆμ—ˆλ˜ 것은 λ°”λ‘œ νŠΈλžœμ§€μ…˜ νƒœκ·Έμ˜ name 속성 λ•νƒμž…λ‹ˆλ‹€. name 속성에 맞좰 μ•„λž˜μ™€ 같이 CSS μ½”λ“œλ₯Ό κ΅¬ν˜„ν–ˆμ—ˆμŠ΅λ‹ˆλ‹€.

Β 


<transition name="fade">
</transition>
Β 


Β 



.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

fade-enter-active, fade-leave-active λ“±μ—μ„œ λ³Ό 수 μžˆλ“―μ΄ 뷰의 νŠΈλžœμ§€μ…˜ CSS μ½”λ“œλŠ” μΌμ •ν•œ κ·œμΉ™μ„ κ°–μŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œ μ‚¬μš©ν•˜λŠ” CSS ν΄λž˜μŠ€λŠ” μ•„λž˜μ™€ 같이 6κ°œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

μ½˜μ†”μ—μ„œ ν™•μΈν•œ μΈμŠ€ν„΄μŠ€ λ‚΄μš©

일반적으둜 v-enter, v-leave-toλ₯Ό ν•¨κ»˜ μ‚¬μš©ν•˜κ³ , v-enter-to, v-leaveλ₯Ό ν•¨κ»˜ μ‚¬μš©ν•©λ‹ˆλ‹€. 그림의 색깔을 보면 짝 μ§€μ–΄μ Έμ„œ 잘 κ΅¬λΆ„λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.