트랜지션

트랜지션

https://ryuzuka.github.io/VUE/tutorial/15_transition.html

• <transition>

- single element

<div id="app">

<button @click="show = !show">

Toggle render

</button>

<transition name="transition">

<p v-if="show">hello</p>

</transition>

</div>

<style>

.transition-enter-active { transition: opacity .5s }

.transition-enter { opacity: 0 }

.transition-enter-to { opacity: 1 }

.transition-leave-active { transition: opacity .5s }

.transition-leave { opacity: 1 }

.transition-leave-to { opacity: 0 }

</style>

<script>

new Vue({

el: '#app',

data: {

show: true

}

});

</script>

• <transition-group>

- multiple element ( v-for )

<div id="app">

<button @click="show = !show">Toggle render</button>

<transition-group name="transition" tag="ul">

<li v-for="item in items" v-bind:key="item" class="item" v-if="show">{{ item }}</li>

</transition-group>

</div>

<style>

.transition-enter-active { transition: opacity .5s }

.transition-enter { opacity: 0 }

.transition-enter-to { opacity: 1 }

.transition-leave-active { transition: opacity .5s }

.transition-leave { opacity: 1 }

.transition-leave-to { opacity: 0 }

</style>

<script>

new Vue({

el: '#app',

data: {

show: true,

items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],

nextNum: 10

},

methods: {

}

});

</script>

• 트랜지션 클래스

1. v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거됩니다.

2. v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용됩니다. 트랜지션 / 애니메이션이 완료되면 제거됩니다.

3. v-enter-to: 진입 상태의 끝에서 실행됩니다. 엘리먼트가 삽입된 후 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.

4. v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거됩니다.

5. v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거됩니다.

6. v-leave-to: 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.

• javascript hook

<transition

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"

v-on:leave="leave"

v-on:after-leave="afterLeave"

v-on:leave-cancelled="leaveCancelled">

</transition>

• appear

최초 렌더링 시 트랜지션

<transition

appear

// 사용자 정의 css

appear-class="custom-appear-class"

appear-to-class="custom-appear-to-class"

appear-active-class="custom-appear-active-class"

// javascript 훅

v-on:before-appear="beforeAppear"

v-on:appear="appear"

v-on:after-appear="afterAppear"

v-on:appear-cancelled="appearCancelled">

</transition>

• mode

트랜지션 모드

in-out: 처음에는 새로운 엘리먼트가 트랜지션되고, 완료되면 현재 엘리먼트가 트랜지션됩니다.

out-in: 현재 엘리먼트가 먼저 트랜지션되고, 완료되면 새로운 요소가 바뀝니다.

<transition mode="out-in">

<!-- ... -->

</transition>

https://kr.vuejs.org/v2/guide/transitions.html