Smooth apperance in vue.js

Using transition component

by adward

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <h1>{{header}}</h1>
  <button @click="toggle">Comment this article</button>
  <transition name="slide">
    <div class="form-box" v-if="visible">
      <form action="#">
        <textarea name="message" id="message"></textarea>
        <button>Go</button>
      </form>
    </div>
  </transition>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium reiciendis, delectus? Minima ut recusandae iure neque voluptates ipsa eos placeat natus, commodi, repellendus molestias reiciendis ab officiis nisi in deserunt.</p>
</div>

CSS

* {
  box-sizing: border-box;
}

.form-box {
  height: 200px;
  
  padding: 10px;
  border: 1px dashed #000;
  background-color: #efefef;
}

form {
  height: 100%;
}

textarea {
  width: 100%;
  height: calc(100% - 24px);
}

/* vue.js classes */
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease-out;
}

.slide-enter, .slide-leave-to {
  height: 0;
  padding: 0;
  opacity: 0;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      header: 'Testing smooth show/hide',
      visible: false
    }
  },
  methods: {
    toggle() {
    	this.visible = !this.visible;
    }
  }
})