Simultaneous page transitions in Nuxt.js

simultaneous-transitions.vue

<template>
  <div class="container">
    <h1>Flex Test</h1>
    <div class="content" @click="show = (show + 1) % 3">
      <transition name="fade">
        <div v-if="show == 0" class="foo">
          <h2>Foo</h2>
          <p>One paragraph.</p>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="show == 1" class="bar">
          <h2>Bar</h2>
          <p>One paragraph.</p>
          <p>Two paragraphs.</p>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="show == 2" class="baz">
          <h2>Baz</h2>
          <p>One paragraph.</p>
          <p>Two paragraphs.</p>
          <p>Three paragraphs.</p>
        </div>
      </transition>
    </div>
    <p>Footer</p>
  </div>
</template>

<script>
export default {
  layout: 'blank',

  data () {
    return {
      show: 0
    }
  }
}
</script>

<style lang="sass">
body
  padding: 20px

h2
  font-weight: bold
  font-size: 20px
  line-height: 30px

.content
  display: flex
  position: relative
  flex-direction: row
  overflow: hidden
  width: 100%

  &>*
    min-width: 100%
    margin-right: -100%
    padding: 20px
    color: white

.foo
  background: #fc0

.bar
  background: #0cf

.baz
  background: #666

.fade-enter-active
  animation: 0.2s ease 0s fade

.fade-leave-active
  animation: 0.2s ease 0s reverse fade

@keyframes fade
  0%
    margin-bottom: -100%
    opacity: 0
  50%
    margin-bottom: 0
  100%
    opacity: 1.0
</style>