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

Question

我目前在组件的 methods 对象中有这段代码:

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是对象的属性，由 data 返回Vue组件的方法。 然后我顺利的改成了splashOpacity ，或者查看setInterval或者像 Greensock 这样的图书馆.简短示例:

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

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