vue3 scoped & animation

Scoped Style

style에 작성된 모든 코드는 해당 클래스 및 태그에 적용이된다.

중복으로 적용되지 않도록 <style Scoped>을 이용해 해당 컴포넌트 안에서만 적용이 되도록 한다.

애니메이션 적용!

fade-in / fade-out ⇒ transition name="" 으로 지정

name 안에는 원하는 효과를 작성한다

<div id="demo">
  <button @click="show = !show">
    Toggle
  </button>

  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

const Demo = {
  data() {
    return {
      show: true
    }
  }
}

Vue.createApp(Demo).mount('#demo')

.fade-enter-active,
.fade-leave-active {
	/* 여기에 해당하는 코드는 무엇을 얼마동안 실행할 것인지 */
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0px);
}

애니메이션 효과가 필요한 태그를 transition으로 감싸고 css을 해당 코드와 같이 작성