我还应该在VueJS中使用jQuery来制作动画吗？

Question

I currently have this piece of code inside my methods object in a component:

startImageAnimation() {
    $('.splash-image').fadeIn(1400, () => {
        setTimeout(function() {
            $('.splash-image').fadeOut(1400, () => {
                setTimeout(() => {
                    $('.splash-screen').fadeOut(600);
                });
            });
        }, 1000);
    });
},

I really tried to figure a way to it using Vue transitions, but it just looks waaaaay too hard for something this simple to do using jQuery.

The real question here is: should I still code like this or should I take a different approach in these situations? The same for things like jQuery animate() or any other methods that jQuery makes a lot easier to do than with pure JS.

Thanks!

Answer 1

I personally prefer to animate not the element directly, but properties connected with it. For example, I might use such a piece of code:

<div class="splash-screen" :style={opacity: splashOpacity}>

where splashOpacity is a property of the object, returned by data method of Vue component. And then I smoothly change splashOpacity , either vie setInterval or some sort of library like Greensock . Short example:

data () {
    return {
       splashOpacity: 0 
    }
},

startImageAnimation () {
    TweenLite.to(this, 1, {
       splashOpacity: 1
    }); 
}