[Vue + typescript] transition

VUE.JS 목록

 

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>

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

VUE.JS 목록