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

Posted 2023-02-16

【中文标题】我还应该在 VueJS 中使用 jQuery 来制作动画吗？

【英文标题】：Should I still use jQuery to animations in VueJS?

【发布时间】：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

【参考方案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
    );