VueJS - Modal com Transitions

VueJS - Modal com Transitions

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
<div class="column" id="app">

  <transition name="fade">
    <!-- Modal -->
    <div :class="{ 'is-active' : isActive, modal : modal }" id="modal" v-if="isVisible">
      <div class="modal-background"></div>
      <div class="modal-content">
        <!-- Any other Bulma elements you want -->
        <h3 class="title is-3">
        Modal
        </h3>

        <p>
        A classic modal overlay, in which you can include any content you want

        The modal structure is very simple:

        modal: the main container
        modal-background: a transparent overlay that can act as a click target to close the modal
        modal-content: a horizontally and verticaly centered container, with a maximum width of           640px, in which you can include any content modal-close: a simple cross located in the top         right corner.
      </p>
      
      </div>
      <button class="modal-close" @click="closeModal"></button>
    </div>
  </transition>

  <button type="button" class="button" @click="showModal">
    Modal
  </button>
</div>

CSS

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

.modal-background {
  opacity: 0.9
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      modal: true,
      isActive: false,
      isVisible: false
    }
  },
  methods: {
    showModal: function() {
      // document.getElementById('modal').classList.add('is-active')
      this.isActive = true
      this.isVisible = true
    },
    closeModal: function() {
      // document.getElementById('modal').classList.remove('is-active')
      this.isActive = false
      this.isVisible = false
    }
  }
})