Vue.js animation example for modal overlay

Example.vue

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="slide">
      <div class="fs" v-if="show">
        <button @click.stop="show = false">Close me</button>
        <div v-html="popupContent" />
      </div>
    </transition>
    <div v-html="content" />
  </div>
</template>

<script>
export default {
  created () {
    fetch('https://baconipsum.com/api/?type=meat-and-filler&paras=15&start-with-lorem=1&format=html')
      .then(response => response.text())
      .then(text => { this.content = text })
    fetch('https://baconipsum.com/api/?type=meat-and-filler&paras=3&start-with-lorem=1&format=html')
      .then(response => response.text())
      .then(text => { this.popupContent = text })
  },
  data () {
    return {
      show: false,
      content: '<p><i>Loading...</i></p>',
    }
  },
  watch: {
    show (newValue) {
      document.body.style.overflow = newValue ? 'hidden' : ''
    }
  }
}
</script>

<style>
.fs {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  background-color: greenyellow;
  padding: 20px;
  overflow: auto;
}
.fs button {
  transition: opacity 0.5s;
}

.slide-enter-active button {
  opacity: 0;
}
.slide-enter-active {
  animation: slide-in .5s ease;
}
.slide-leave-active {
  animation: slide-in .5s reverse ease;
}
@keyframes slide-in {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(10px);
    opacity: 0.8;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>

index.js

import Vue from 'vue'
import App from 'App'

new Vue({ el: '#app', render: h => h(App) })