Frontend/Vue
[Vue + typescript] transition
romeoh
2022. 5. 4. 11:03
반응형
Opacity
<template>
<div>
<button v-on:click="opacity = !opacity">
opacity
</button>
<transition name="fade1">
<p v-if="opacity">hello2</p>
</transition>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
@Component
export default class TestDynamicComponentView extends Vue {
opacity = false
}
</script>
<style scoped>
/* opacity */
.fade1-enter-active, .fade1-leave-active {
transition: opacity .5s;
}
.fade1-enter, .fade1-leave-to {
opacity: 0;
}
</style>
Move
<template>
<div>
<button v-on:click="move = !move">
move
</button>
<transition name="move">
<p v-if="move">hello2</p>
</transition>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
@Component
export default class TestDynamicComponentView extends Vue {
move = false
}
</script>
<style scoped>
/* move */
.move-enter-active {
transition: all .3s ease;
}
.move-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.move-enter, .move-leave-to {
transform: translateX(50px);
}
</style>
Dynamic Component
<template>
<div>
<button v-on:click="dynamic = !dynamic">
dynamic
</button>
<transition name="dynamic">
<component :is="isDynamic"></component>
</transition>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
@Component
export default class TestDynamicComponentView extends Vue {
dynamic = false
get isDynamic () {
if (this.dynamic) {
return TestDynamicChildView
}
}
}
</script>
<style scoped>
/* dynamic */
.dynamic-enter-active, .dynamic-leave-active {
transition: all .3s ease;
}
.dynamic-enter, .dynamic-leave-to {
transform: translateX(50px);
}
</style>
Keyframe Animation
<template>
<div>
<button v-on:click="animation = !animation">
animation
</button>
<transition name="animation">
<p style="display:inline-block" v-if="animation">hello4</p>
</transition>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
@Component
export default class TestDynamicComponentView extends Vue {
animation = false
}
</script>
<style scoped>
/* animation */
.animation-enter-active {
animation: bounce-in .5s;
}
.animation-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
Javascript Hook
<template>
<div>
<button v-on:click="hook = !hook">
hook
</button>
<transition
name="fade2"
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"
>
<p v-if="hook">hello5</p>
</transition>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
@Component
export default class TestDynamicComponentView extends Vue {
hook = false
/**
* hook
*/
beforeEnter () {
console.log('beforeEnter')
}
enter (el: any, done: any) {
console.log('enter')
done()
}
afterEnter () {
console.log('afterEnter')
}
enterCancelled () {
console.log('enterCancelled')
}
beforeLeave () {
console.log('beforeLeave')
}
leave (el: any, done: any) {
console.log('leave')
done()
}
afterLeave () {
console.log('afterLeave')
}
leaveCancelled () {
console.log('leaveCancelled')
}
}
</script>
<style scoped>
/* hook */
.fade2-enter-active, .fade2-leave-active {
transition: opacity .5s;
}
.fade2-enter, .fade2-leave-to {
opacity: 0;
}
</style>
Group Transition
<template>
<div>
<button @click="add">
add
</button>
<button @click="remove">
remove
</button>
<transition-group name="group">
<span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
@Component
export default class TestDynamicComponentView extends Vue {
items = [1, 2, 3, 4, 5, 6, 7, 8, 9]
nextNum = 10
randomIndex () {
return Math.floor(Math.random() * this.items.length)
}
add () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
}
remove () {
this.items.splice(this.randomIndex(), 1)
}
}
</script>
<style scoped>
/* group */
.list-item {
display: inline-block;
margin-right: 10px;
}
.group-enter-active, .group-leave-active {
transition: all 1s;
}
.group-enter, .group-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
</style>
Shuffle
<template>
<div>
<button @click="shuffle">
suffle
</button>
<transition-group name="shuffle">
<li v-for="item in items" :key="item">{{ item }}</li>
</transition-group>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
import _ from 'lodash'
@Component
export default class TestDynamicComponentView extends Vue {
items = [1, 2, 3, 4, 5, 6, 7, 8, 9]
shuffle () {
this.items = _.shuffle(this.items)
}
}
</script>
<style scoped>
/**
* shuffle
*/
.shuffle-move {
transition: transform 1s;
}
</style>
반응형