How to trigger event when Vue component is rendere

Question

I've googled a lot, but didn't found anything about this.

I want to fade in my content when it's rendered by Vue. My application is large and it takes some time to be ready for user. But CSS animation doesn't want to work when Vue inserts content into block. See listed code below at 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);

Also I didn't found any built-in Vue solutions (event, methods, etc) to run code when Vue is rendered. Events like load & DOMContentLoaded don't help too. created also doesn't provide expected result:

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

Does anyone know good solution for my problem?

Thanks.

Answer 1

Much thanks to @David L and @Bill Criswell for pointing to Transition Effects. I've achieved expected result with this code:

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

Here is JSFiddle with working result.