Как сделать плавное появление компонента в Vue?

Question

[Артур]

Может вопрос и нубский, в принципе решение имеется на него. Но мне кажется, что в Vue есть решение с "коробки" данного косяка. Рассматриваем первичную загрузку приложения.

Рассмотрим примитивный компонент "Search.vue"

<template lang="pug">
     form.nav__search(action="")
        .nav__search__block
            input.nav__search__input#search(
                type="text"
                placeholder="Найти вопрос, ответ, категорию или пользователя.."
                v-model="message"
            )
            label.nav__search__label.icon-search(for="search")
</template>
<script>
    export default {
        ...
        data (){
            return {
                message:''
            }
        }
        ...
    }
</script>

И его вызов:

import Vue from 'vue';
import Search from './vue/Search.vue';

new Vue({
    el: "#app",
    components: {
        Search
    }
});

Когда такой компонент один, он будет рендериться без проблем, глазу не будет заметно его появление. Но при наличии 30+ компонентов, как в моем приложении, сильно бросается в глаза рендер этих кусков.

Как это можно оптимизировать, без использования SSR?

Comments

[sim3x]

Почему не использовать цсс?

Answer 1

[Evgeny Kulakov]

Можно обернуть компонент в <transition> и назначить ему произвольную анимацию.
Может замедление отрисовки у вас происходит из-за того, что вы данные подгружаете для этих компонентов. Т.е. данные приходят порциями и после каждой порции вы отображаете соответствующий компонент? Тогда стоит сначала все данные принять, а потом все сразу отрендерить.