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

【问题标题】：Should I still use jQuery to animations in VueJS?我还应该在 VueJS 中使用 jQuery 来制作动画吗？
【发布时间】：2017-10-24 22:13:33
【问题描述】：

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

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

我确实尝试过使用 Vue 转换来找到一种方法，但是对于使用 jQuery 来做这么简单的事情来说，它看起来太难了。

这里真正的问题是：在这些情况下我应该仍然这样编码还是应该采取不同的方法？对于像 jQuery animate() 或 jQuery 比纯 JS 更容易执行的任何其他方法之类的东西也是如此。

谢谢！

【问题讨论】：

当然可以。 Y 可以使用任何动画方法：纯 css、js、jquery、vue 过渡。这只是您的选择。而且你不能用vue做一些动画，只有额外的js
我知道这一点，但我不完全确定我是否应该这样做，因为我不知道是否有更好的方法（更 Vue 的方法）来做到这一点，这就是让我要求确保我没有考虑“jQuery 方式”而不是“Vue 方式”的原因。感谢您的回复！
jquery 是用命令式的方式做的，但现在你应该以声明式的方式思考，所以混合这两者不是一个好习惯，但如果你愿意，你仍然可以这样做
是的，这就是我的想法@Giedrius，但在这种特定情况下我找不到简单的出路，你能提供任何关于我想做的转换的例子吗？谢谢！
你应该按这个顺序加载你的脚本 1. jQuery 2. vuejs 3. 你的 application.js。例如，您可以使用 requirejs / webpack 来加载它们，但不确定冷实现会是什么样子。虽然我会使用不同的方法，但没有 jQuery。阅读关于 vuejs 转换 vuejs.org/v2/guide/transitions.html

标签： javascript jquery vue.js transition vuejs2

【解决方案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
    }); 
}

【讨论】：