뷰 라우터와 트랜지션

[최재문]

라우터 사용하면서 트랜지션을 사용하고 싶은데요
라우터가 없다면 컴포넌트를 트랜지션으로 감싸서 개발이 가능한데 라우터때문에 조금 어렵네요
예를들어 /home 라는 경로로 접속하면 h0me컴포넌트를 처음 보여줄 때 home컴포넌트 전체에 등장애니메이션을 주고 싶습니다.
router-view 태그 전체를 transition 태그로 감싸면 모든 컴포넌트에 동일한 트랜지션이 생기는데 각 컴포넌트별로 다른 효과를 주고 싶습니다. 

[codingapple]

그러게요 안해봤는데 home.vue 파일들어가서 html 내부를 <transition>으로 묶고 class주면 되나 실험해봅시다 

[최재문]

<transition-group>도 해보고 router에서 beforeroute뭐시기도 해보고 하루종일 삽질 해봤는데도 안되네요 ㅠ

[codingapple]

밑에 data 하나 만드시고 

<transition :name="data이름">

이런 식으로 데이터바인딩해놓은 다음에

현재 url이 /list로 이동할 경우 data를 wow로 바꾸고

/home으로 이동할 경우 data를 wow2로 바꾸는 코드를 짜면 됩니다 

 

watch : {
    '$route'(to){
      if (to.path === '/list') {
        this.데이터 = 'wow'
      } else {
        this.데이터 = 'wow2'
      }
    }
  },

 

[최재문]

와... $route를 이용해서 url변화를 감시할 수 있었군요 

이것때문에 한 15시간은 삽질한거같은데 바로 해결했습니다 감사합니다 ㅠㅠ
추석 잘 보내세요

[최재문]

일단 애니매이션 작동은 하는데..
이게 애초에 App.vue에서 router-view 태그를 transition-group으로 감싸서 한거라서
컴포넌트 전체에 모든 효과가 주어지네요 ㅋㅋㅋ;; 배경은 냅두고 텍스트같은 요소들에만 효과를 주고 싶은데 
일단 감은 잡았으니 많이 고민해보면 해결할 것 같아요 삽질하러 갑니다

[codingapple]

그럼 그냥 부착하면 애니메이션 생기는 class명 만들어두고 

컴포넌트가 mounted 될 때 원하는 글자에 class 부착하면 쉽지않을까요 

[최재문]

처음에 컴포넌트 설계를 개판으로 해서 적용하는데 쉽지 않았네요 ㅋㅋ;;
그냥 공통으로 사용하는 부모 컴포넌트를 만들고 안에 자식컴포넌트를 보여주는 데이터 만들고 데이터를 watch해서 각각의 애니메이션 주는식으로 하니까 해결되었습니다!
컴포넌트 설계가 중요하다는걸 뼈저리게 느꼈습니다..

혹시 무료 포트폴리오 코칭도 아직 유효한가요? 프로젝트 완성되고나면 고쳐야 할 코드라던지 점검받고싶네요 ㅠㅠ

[codingapple]

넴

[글쓴이]

글