Vue 2.0 Hello World

by goldorak

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
  <transition name="slide">
    <div v-if="showDiv" @click="showDiv = false" class="content">
      content<br />
      content<br /><br />
      content<br />
      content<br /><br />
      content<br />
      content<br /><br />
      content<br />
      content
    </div>
  </transition>
</div>

CSS

.content {
  background: blue;
}

.slide-leave-active {
  overflow: hidden;
  max-height: 198px;
  transition: max-height 1s ease;
}

.slide-leave-to {
  max-height: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: {
  	showDiv: true
  }
})