[Udemy Vue 완벽가이드 Section14] 195. "CSS만"으로 충분하지 않은 이유

지금과 같이 CSS의 기본 transition 효과와 animation으로는 충분하지 않은 경우란 어떤 때일까?

 

# transition, animation 충분하지 않은 경우

CSS애니메이션과 전환 효과는 대개 해당 기능 자체로도 충분하나, 지금과 같이 추가하게 되면 모자란 부분이 나올 수 있다.

예시를 한번 보자.

 

현재 실행중인 애플리케이션에서 Show Dialog를 누르면 팝업 창이 뜬다.

떠 있다가 창을 닫으면 없어진다.

 

이 동작으로 충분하다고 생각할 수 있다.

하지만 팝업 창에도 애니메이션이 필요한 경우가 있다.

팝업으로 나타낼 때와 사라지는 애니메이션이 필요할 수 있다.

바로 이런 경우에는 지금과 같이 단순히 Vue에 CSS 클래스를 추가하여 CSS애니메이션을 적용하는 방법으로는 충분하지 않다.

특히 사라지는 동작에도 애니메이션을 적용한다면 말이다.

왜 그런지 한번 보자.

 

해당 팝업, 즉 dialog코드가 있는 BaseModal.vue로 가서 dialog 선택자에 애니메이션을 추가해보자.

- 아래에 @keyframes를 정의하고 원하는 이름을 입력하자. 이번에는 이름을 'modal'로 해보자. 다르게 설정해도 된다.

- 0%에서 100%가 되도록 하자.

 

from

• 만약 지금처럼 두 가지 상태만 정의한다고 하면 from과 to라는 축약어를 사용할 수 있다.
• 시작 상태를 정의하고 있으니, modal이 보이지 않도록 opacity를 0으로 설정하자.
• transform: translateY를 통해 Y축 기준 위로 50px 이동하도록 설정하자.
• scale(0.9)를 써서 크기를 90%로 바꾸자.

 

to

• 마지막 상태는 to에서 정의하는데 opacity:1, translateY(0)으로 해당 요소의 기존 위치로 이동시키고, scale(1)을 통해 기존 크기로 되돌려준다.

이제 modal 애니메이션을 dialog선택자에 추가할 차례이다.

이렇게 설정함으로써 선택된 모든 dialog, 현재는 하나 뿐이지만 모든 dialog에 애니메이션을 적용하는 것.

기본적으로 애니메이션은 해당 요소가 페이지에 처음 등장할 때 재생된다. 이 경우에는 바로 재생된다.

 

아래에 설정해보자. animation에 modal을 쓰고, 지속시간(0.3s) 설정과 ease-out함수, 그리고 중요한 forwards까지 입력해 마지막 상태가 유지되도록 CSS에 인지시킨다.

이렇게 저장한 다음 "Show Dialog"버튼을 클릭하면 짧은 애니메이션이 적용되었다.

dialog 선택자에 animation이 추가되었기 때문에 가능한 일.

dialog {
  position: fixed;
  top: 30vh;
  width: 30rem;
  left: calc(50% - 15rem);
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  border-radius: 12px;
  padding: 1rem;
  background-color: white;
  z-index: 100;
  border: none;
  animation: modal 0.3s ease-out forwards;
}

@keyframes modal {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

 

 

 

App.vue에서 커스텀 컴포넌트의 v-if를 통해 'dialogIsVisible'이 true인 경우에만 base-modal 컴포넌트를 추가하고 있으므로 base-modal 컴포넌트에 속한 dialog 요소도 그에 해당할 때만 추가된다.

<template>
 <!--생략-->
  <base-modal @close="hideDialog" v-if="dialogIsVisible">
    <p>This is a test dialog!</p>
    <button @click="hideDialog">Close it!</button>
  </base-modal>
  <div class="container">
    <button @click="showDialog">Show Dialog</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogIsVisible: false,
      animatedBlock: false,
      paralsVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogIsVisible = true;
    },
    hideDialog() {
      this.dialogIsVisible = false;
    },
  },
};
</script>

따라서 그런 경우라면 이 모달의 애니메이션이 재생된다.

 

 

# 요소 제거할 경우, 애니메이션 추가 시 문제발생

요소를 제거할 때도 애니메이션을 추가한다면 문제가 발생한다.

지금은 팝업창이 바로 사라진다.

이때 해당 요소가 DOM으로부터 분리된다는 점이 문제이다. 이렇게 되면 CSS를 이용해서 애니메이션을 적용할 수가 없다.

바로 제거되기 때문에 애니메이션이 끝나고 나서 브라우저가 팝업창을 제거하도록 할 수가 없다.

하지만 사라질 때에도 애니메이션을 적용하려면 그게 가능해야 한다.

 

바로 이런 문제를 Vue를 통해 해결할 수 있다.

Vue는 요소가 나타낼 때도 애니메이션을 적용할 수 있고, 사라질 때도 적용할 수 있다.

애니메이션이 끝날 때까지 팝업창이 사라지는 작업을 지연시키는 방법으로.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.