<div id="app">
  <div v-bind:class="[isShowing ? blurClass : '', clearClass]">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis turpis nec ligula pellentesque cursus. Maecenas libero orci, ultrices nec blandit quis, malesuada id felis. Etiam tempus vitae neque vitae fringilla. Curabitur consectetur ante in malesuada mattis. Integer gravida mauris id hendrerit bibendum. Nulla erat mi, rutrum consectetur libero a, bibendum sagittis sem. Morbi pretium velit eget libero consequat pretium.</p>
    <button @click="toggleShow">Say Hello</button>
  </div>
  <transition enter-active-class="animated zoomIn"
    leave-active-class="animated zoomOut">
    <modal v-if="isShowing" class="modal">
      <button @click="toggleShow">Close</button>
    </modal>
  </transition>
</div>

body {
  display: flex;
  justify-content: center;
}

#app {
  text-align: center;
  margin: 60px;
  max-width: 370px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

button {
  background-color: white;
  border: 2px solid black;
  padding: 10px 15px;
  cursor: pointer;
}

h4 {
  margin: 0 0 15px;
}

.modal {
  background: cyan;
  color: black;
  padding: 20px;
  width: 100px;
  position: absolute;
  min-width: 200px;
}

.clear {
  transition: opacity 1s;
}

.blur {
  filter: blur(1px);
  opacity: 0.5;
}

Vue.component('modal', {
  template: `<div>
    <h2>Hello Vue!</h2>
      <slot></slot>
   </div>`
})

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false,
      clearClass: 'clear',
      blurClass: 'blur'
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
});