JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>

CSS

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

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

* {
    -o-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

}

* {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
}

* {
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

* {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

JavaScript

new Vue({
  el: '#app',
  template: `
    <span>
      <button @click="test()">Run test</button>
      <transition name="fade" :duration="0">
        <p id="transition" v-show="show">Hello, world!</p>
      </transition>
    </span>
  `,
  data() {
  	return {
      show: false,
    };
  },
  methods: {
    test() {
      const p = document.querySelector('#transition');
      
      let display = getComputedStyle(p).display;
      console.log('1. Display should be "none", it is:', display);

      this.show = true;

      setTimeout(() => {
        display = getComputedStyle(p).display;
        console.log('2. Display should be "block", it is:', display);

        this.show = false;
        
        setTimeout(() => {
          display = getComputedStyle(p).display;
          console.log('3. Display should be "none", it is:', display);
        }, 10);
      }, 10);
    }
  }
});