개요

이 글은 모바일 팩토리 Advent Calendar 2017 17일째 되는 글이다.
16일째 보도는 @tsukumaru씨의 goo-staticmaps 지도에 임의의 그림을 아이콘으로 표시하려면입니다.
며칠 전에 vue의 css 애니메이션을 접할 기회가 있었기 때문에 17일째 본 보도에서 제목과 같이 vue의 css 전환 주위를 소개했다.

무선 점프

vuev-if나 v-show를 통해 구성 요소의 디스플레이나 숨김을 전환하려면 <transition>로 구성 요소를 둘러싸서 할 수 있습니다.
transsition 구성 요소의name 속성을 기반으로 하는 css 애니메이션을 재생합니다. 이 때 css 클래스 이름은 특정한 클래스 이름 *-enter-to, *-enter 이어야 합니다.
참조: Enter/Leave 및 점프 목록 - 점프 수준

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

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

vue-router가view를 변경할 때 점프

<router-view>내 재현된view변경 시 점프를 설정할 때도 <transition>로 실현할 수 있다.

<transition name="fade">
  <router-view></router-view>
</transition>

보기마다 다른 점프 설정

아까의 예는router-view를 통해 표시된 모든view를fade로 변환하는 것이지만 상황에 따라view에 따라 다른 점프를 설정하고 싶은 경우도 있습니다.

변환 장치

Enter/Leave 및 점프 목록 - 개별 컴포넌트 - 어셈블리 점프에는transition 구성 요소에 싸인 구성 요소에 대해 CSS 변환 클래스를 추가, 삭제함으로써 변환한다는 기술이 있다.
따라서 이전의 예에서 hoge 구성 요소가 그려지고 변환될 때 다음과 같은 종류가 부여됩니다.
hoge 구성 요소를 그릴 때

<hoge class="fade-enter-active fade-enter-to"></hoge>

각 구성 요소에 대한 CSS 점프 설명

즉, CSS 클래스는 그리는 구성 요소의 루트 노드에 추가되므로 각 구성 요소에 CSS 변환을 설정하면 뷰마다 다른 변환이 가능합니다.
단순히 설정하면 *-enter-active 등 유명이 중복되기 때문에 각 부품의 스타일은 scoped css이 된다.
hoge.vue

<template>
  <p>HOGE</p>
</template>

<style scoped>
.fade-enter-active {
  transition: all 1s 0s ease;
}
.fade-enter {
  opacity: 0;
}
</style>

fuga.vue

<template>
  <p>HUGA</p>
</template>

<style scoped>
.fade-enter-active {
  transition: all 1s 0s ease;
}
.fade-enter {
  transform: translate(-100px, 0);
}
</style>

App.vue

<template>
  <div id="app">
    <transition name="fade" appear>
      <router-view></router-view>
    </transition>
    <div>
      <router-link to="/hoge" >to hoge</router-link>
      <router-link to="/fuga" >to fuga</router-link>
    </div>
  </div>
</template>

뷰마다 다른 점프를 설정할 수 있습니다.

총결산

scoped css를 사용하면view 설정에 따라 이동할 수 있습니다.css 애니메이션도 설정할 수 있습니다.
vue의 점프에 관한 문서만 보면 JS 연결고리와 리스트 변환 등 할 수 있는 일이 많기 때문에 이런 것들을 접했을 때 다시 정리하고 싶어요.
내일 담당자는@akihiro_0228입니다.잘 부탁드립니다.