vue transition animation code example

Example 1: vue transition

<transition name="wrapper">
	<span v-if="show"></span>
</transition>
<script>
export default {
  data () {
    return {
      show: true
    }
  }
</script>
<style scoped>
  .wrapper-enter-active {
    animation: finished 2.5s reverse;
  }
  .wrapper-leave-active {
    animation: finished 2.5s;
  }
  @keyframes finished {
    0% { opacity: 1; top: 0;}
    50% { opacity: 1; top: 0;}
    60% { opacity: 1; }
    100% { opacity: 0; top: -100vh;}
  }
</style>

Example 2: vue transition v-if else

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