Vue

by Samuel Fullman

HTML

<div id="app">
  <div>
    <div>
      <input name="checked_field" type="text" />
      <p class="has-warning danger" :style="{ display }">Test error message</p>
    </div>
    <div>
    This is text below.  We want it to transition down without jarring.
    </div>
    </div>
  </div>
</div>

CSS

body{
  margin: 20px;
  font-family: Helvetica;
  color: #444;
}
.has-warning{
  color: darkred;
}

.has-warning, .has-warning[style*='display: none'] {
  outline: 1px dashed #ccc;
  transition: all .5s;
  display: block !important;
  opacity: 0;
  height: 0;
}

.has-warning:not([style*='display: none']) {
  height: 30px;
  opacity: 1;
}

Vue

new Vue({
  el: "#app",
  data: {
     display: 'none'
  },
  mounted: function() {
   // delay toggle to test
		setTimeout(function() {
        this.display = 'block';
    }.bind(this), 3000);
	}
})