我还应该在 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是对象的属性，由dataVue 组件的方法返回。然后我顺利地改变了splashOpacity，要么是 viesetInterval要么是像Greensock这样的库。简短的例子：

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

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