JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div id="app">
  <div v-cloak>
    <p class="content" @click.prevent="addAttr">Efficitur quis metus ut feugiat. Fusce commodo interdum ante dapibus mollis. Integer nunc metus, fringilla vel mauris ut, dapibus feugiat felis. Mauris nec iaculis mi. Cras et nulla a est dapibus volutpat. Integer ut elit sed magna ultrices semper. Ut sed venenatis est, eget dignissim dui. Aenean porta et dolor ac tincidunt. Fusce lobortis commodo tristique. Integer et urna vel est facilisis aliquam enim maximus rutrum. Integer placerat vitae augue id euismod.</p>
  </div>
</div>

CSS

/* v-cloak is a special vue directive/attribute that is removed once a component is mounted */
/* it can be used to hide content in a component until it is "loaded" */
div > * {
  opacity: 1;
  transition: opacity 2s 2s ease;
  will-change: opacity;
}

[v-cloak] > * {
  opacity: 0;
}

Vue

new Vue({
  el: '#app',
  methods: {
  	addAttr({ target }) {
      target.parentElement.setAttribute('v-cloak', '');
    }
  },
  beforeCompile() {
   setTimeout(() => {}, 1000);
  }
});