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

Question

我目前在组件中的方法对象中有这段代码：

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

我真的试图用Vue转换来找到它的方法，但是对于使用jQuery这么简单的事情，它看起来太难了。

这里真正的问题是：我是否还应该像这样编码，还是应该在这些情况下采用不同的方法？对于像jQuery animate（）或jQuery比使用纯JS更容易做的任何其他方法这样的事情也是如此。

谢谢！

Answer 1

我个人更喜欢不直接动画元素，而是与它相关的属性。例如，我可能会使用这样一段代码：

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

其中splashOpacity是对象的属性，由Vue组件的data方法返回。然后我顺利地改变了splashOpacity，无论是viesetInterval还是像Greensock这样的某种类型的库。简短的例子：

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

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