How to trigger event when Vue component is rendered?

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.

Which version of Vue are you using? Transitions can be dealt with programatically in VueJS 2 and you would want to use the mounted hook instead of the created hook since it would be applied to the DOM by then. — David L
– David L, Commented Nov 15, 2016 at 20:37
@DavidL, seems like changing created to mounted didn't help. I'm using last version of Vue. Ok, thanks, I'll try to use transitions now. — Petr Flaks
– Petr Flaks, Commented Nov 15, 2016 at 20:47
I'd definitely recommend vue transitions over external solutions in hooks if possible. — David L
– David L, Commented Nov 15, 2016 at 20:51
I'll politely suggest to read the manual: vuejs.org/v2/guide/transitions.html — Bill Criswell
– Bill Criswell, Commented Nov 15, 2016 at 20:52

tony19 · Accepted Answer · 2022-07-16 01:29:47Z

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.

Collectives™ on Stack Overflow

How to trigger event when Vue component is rendered?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related