Vue2 Page Transitions Part 1 - Controls - https://codepen.io/timrijkse/pen/ALgZpp

App.vue

<template>
  <div id="app">
    <component :is="state.view">
      <h1>{{ state.view }}</h1>
    </component>
    <controls></controls>
  </div>
</template>

<script>
import Box from './components/Controls.vue'

export default {
  components: { Controls },
  data() {
    return {}
  }
}
</script>

<style>
#app {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(76,76,76,1);
	background: -moz-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(36%, rgba(43,43,43,0.74)), color-stop(71%, rgba(28,28,28,0.5)), color-stop(100%, rgba(19,19,19,0.29)));
	background: -webkit-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
	background: -o-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
	background: -ms-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
	background: linear-gradient(135deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
	color: #fff;
}
</style>

Controls.vue

<!-- Controls -->
<template id="controls">
	<ul class="controls">
		<li v-for="(animation, index) in this.state.animations" @click.prevent="setView(animation)" v-bind:class="{ 'active': animation === this.state.view }">
			{{ animation }}
		</li>
	</ul>
</template>

<script>

export default {
  data() {
    return {
      state: {
      	animations: ['fade', 'slide', 'slideUp', 'zoom', 'flipX', 'flipY'],
      	view: 'slide'
      }
    }
  },

  methods: {
    setView(animation) {
      state.view = animation
    }
  }
}

</script>

<style>

.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #c0c0c0;

  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-size: 3rem;
    text-align: center;
  }

  h1 {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
    font-size: 2.8rem;
    text-transform: capitalize;
  }

  p {
    font-family: 'Vollkorn', Georgia, Times, serif;
    font-size: 1.1rem;
  }

  a {
    transition: color 200ms ease-out;
    color: darken(rgba(#fff, .8), 40%);

    &:hover {
      color: darken(rgba(#fff, .8), 60%);
    }
  }
}
</style>

Error Output

   4:3   error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key
   4:26  error  'index' is defined but never used                             vue/no-unused-vars
  16:2   error  Mixed spaces and tabs                                         no-mixed-spaces-and-tabs
  17:2   error  Mixed spaces and tabs                                         no-mixed-spaces-and-tabs
  24:7   error  'state' is not defined                                        no-undef

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')