vue transition

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

1<transition name="wrapper">
2	<span v-if="show"></span>
3</transition>
4<script>
5export default {
6  data () {
7    return {
8      show: true
9    }
10  }
11</script>
12<style scoped>
13  .wrapper-enter-active {
14    animation: finished 2.5s reverse;
15  }
16  .wrapper-leave-active {
17    animation: finished 2.5s;
18  }
19  @keyframes finished {
20    0% { opacity: 1; top: 0;}
21    50% { opacity: 1; top: 0;}
22    60% { opacity: 1; }
23    100% { opacity: 0; top: -100vh;}
24  }
25</style>

1.fade-enter-active, .fade-leave-active {
2  transition: opacity 3s;
3}
4.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
5  opacity: 0;
6}

1<transition
2  v-on:before-enter="beforeEnter"
3  v-on:enter="enter"
4  v-on:after-enter="afterEnter"
5  v-on:enter-cancelled="enterCancelled"
6
7  v-on:before-leave="beforeLeave"
8  v-on:leave="leave"
9  v-on:after-leave="afterLeave"
10  v-on:leave-cancelled="leaveCancelled"
11>
12  <!-- ... -->
13</transition>