Как вызвать событие при рендеринге компонента Vue?

Я много гуглил, но ничего об этом не нашел.

Я хочу, чтобы мой контент исчезал, когда он отображается с помощью Vue. У меня большое приложение, и пользователю нужно время, чтобы оно было готово. Но CSS-анимация не работает, когда Vue вставляет контент в блок. См. Указанный ниже код на странице JSFiddle.

HTML

<div id="my-app">
    <p>Weeverfish round whitefish bass tarpon lighthousefish mullet tigerperch bangus knifefish coley Black sea bass tompot blenny madtom tapetail yellow-eye mullet..</p>

    <hr>

    <example></example>
</div>

CSS

#my-app {
    opacity: 0;
    transition: 2s;
}

#my-app.visible {
    opacity: 1;
    transition: 2s;
}

JavaScript

// Fade in animation will work if you comment this ...
Vue.component('example', {
    template: `<p>Starry flounder loach catfish burma danio, three-toothed puffer hake skilfish spookfish New Zealand sand diver. Smooth dogfish longnose dace herring smelt goldfish zebra bullhead shark pipefish cow shark.</p>`
});

// ... and this 
const app = new Vue({
    el: '#my-app',

    // Makes content visible, but don't provides fade-in animation
    /*
    created: function () {
        $('#my-app').addClass('visible')
    }
    */
});

// Makes content visible, but don't provides fade-in animation
// with enabled Vue
$('#my-app').addClass('visible');

// As you can see, animation with Vue works only here
setInterval(() => {
    $('#my-app').toggleClass('visible');
}, 5000);

Также я не нашел встроенных решений Vue (событий, методов и т. Д.) Для запуска кода при рендеринге Vue. Такие события, как load и DOMContentLoaded, тоже не помогают. created также не дает ожидаемого результата:

const app = new Vue({
    el: '#my-app',
    // Makes content visible, but don't provides fade-in animation
    created: function () {
        $('#my-app').addClass('visible')
    }
});

Кто-нибудь знает хорошее решение моей проблемы?

Спасибо.


javascript vue.js vue-component
person Petr Flaks    schedule 15.11.2016    source источник
comment
Какую версию Vue вы используете? Переходы могут обрабатываться программно в VueJS 2, и вы захотите использовать ловушку mounted вместо ловушки created, поскольку к тому времени он будет применен к DOM.   -  person David L    schedule 15.11.2016
comment
@DavidL, похоже, изменение created на mounted не помогло. Я использую последнюю версию Vue. Хорошо, спасибо, попробую сейчас использовать переходы.   -  person Petr Flaks    schedule 15.11.2016
comment
Я определенно рекомендую переходы vue вместо внешних решений в хуках, если это возможно.   -  person David L    schedule 15.11.2016
comment
Вежливо предлагаю прочитать руководство: vuejs.org/v2/guide/transitions.html < / а>   -  person Bill Criswell    schedule 15.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Большое спасибо @David L и @Bill Criswell для указания на эффекты перехода. Я добился ожидаемого результата с этим кодом:

HTML

<div id="my-app">
    <app>
        <p>Weeverfish round whitefish bass tarpon lighthousefish mullet tigerperch bangus knifefish coley Black sea bass tompot blenny madtom tapetail yellow-eye mullet..</p>

        <hr>

        <example></example>
    </app>
</div>

CSS

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

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

JavaScript

Vue.component('app', {
    data: function () {
        return {
            show: false
        }
    },
    mounted: function() {
        this.show = true;
    },
    template: `<div>
        <transition name="fade">
            <div v-if="show">
                <slot></slot>
            </div>
        </transition>
    </div>`,
});

Vue.component('example', {
    template: `<p>Starry flounder loach catfish burma danio, three-toothed puffer hake skilfish spookfish New Zealand sand diver. Smooth dogfish longnose dace herring smelt goldfish zebra bullhead shark pipefish cow shark.</p>`
});

const app = new Vue({
    el: '#my-app',
});

Вот JSFiddle с рабочим результатом.

person Petr Flaks    schedule 15.11.2016