Как задать исчезновение элемента при загрузке страницы?

Question

[sasha_jarvi]

Имеется следующий код на jquery:

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

Надо сделать аналог с использованием vue.

Элемент выполнил таким образом:

<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
    }
});

Как настроить исчезновение элемента при загрузке страницы? В документации прямого аналога fadeOut в jquery не нашел.

Answer 1

[0xD34F]

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

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

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

Comments

[sasha_jarvi]

Сделал вот так:

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

Свойства тоже прописал, но почему-то все равно прелоадер пропадает раньше, чем прогружается страница. Буду думать дальше

[0xD34F]

sasha_jarvi, да ну? Ну попробуйте засунуть в onload, как до этого делали:

created() {
  window.addEventListener('load', () => this.show = false);
},

[sasha_jarvi]

Спасибо, все получилось