Vue.js 세번째. class 부착법

1.

<div class="hide" :class="{ show: isModalShown }">

        <Modal v-if="isModalShown" :product="products[targetIndex]" @onRemoveModal="removeModal"/>

</div>

 

이렇게 Vue.js 고유 문법으로 클래스 부착 여부를 동적으로 정해줄 수 있다.

 

물론 일반 자바스크립트에서도 조건문에 classList나 addClass, removeClass등으로 클래스 부착 여부를 정해줄 수 있지만,

 

Vue에서 저렇게 :class 에 객체형식으로 클래스명: 조건문을 달아준다.

 

조건문이 true냐, false냐에 따라서 해당 class 부착 여부가 정해진다.

 

 

그리고 

 

.hide {

  transition: all 1s;

  opacity: 0;

}

.show {

  opacity: 1;

}

 

이렇게 애니메이션이 작동하도록 셋팅해놓으면 효과적으로 이펙트를 줄 수 있다.

 

 

 

2.

 

아니면 애니메이션을 주고싶은 태그 자체를

 

<transition name="myClass"></transition>

 

이렇게 감싸주자.

 

 

그리고 css에서

 

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

 

.myClass-enter-active{ transition: all 1s }

 

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

 

이러면 from 부터 to 까지 css속성이 변화하는 이펙트가 가능하다.

 

 

반대로는...

.myClass-leave-from { opacity: 0; }

.myClass-leave-active{ transition: all 1s }

.myClass-leave-to { opacity: 1; }

enter를 leave로 바꿔주면 된다.