How to make an element disappear on page load?

Question

css

I have the following jquery code:

window.onload = function(){
   $('#preloader').fadeOut('slow', function() {});
};

We need to make an analog using vue.

The element is done like this:

<transition name="fade">
    <div id="preloader" v-if="show">
        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    </div>
</transition>

javascript:

var preloader = new Vue({
    el: '#preloader',
    data: {
        show: true
    }
});

How to make an element disappear on page load? I did not find a direct analogue of fadeOut in jquery in the documentation.

Answer 1

.fade-leave-active {
  transition: opacity 1s;
}

.fade-leave-to {
  opacity: 0;
}

mounted() {
  this.show = false;
},