javascript - AngularJS 是一种可以代替 JQuery 用于动画的 "front-end"语言吗？

Question

我正在与一个设计团队合作重新设计我的网站，我的首席开发人员让我告诉他们我想在 HTML 页面中使用 AngularJS 而不是 JQuery，因为它是干净的代码并且拥有最现代的库；他们同意使用。

我猜由于 AngularJS 比 JQuery 更新，他们对此没有太多经验。在项目范围内，我们同意他们只做“前端”工作(例如模板化 Bootstrap 、CSS/html 和网站动画)进行重新设计，但他们告诉我，他们团队中的某人说 AngularJS 是还有“后端”编程工作......这准确吗？

如果他们正在创建我的 HTML 页面，如果他们使用 AngularJS，他们是否必须进行“后端”编程工作，或者这只是“前端”工作？他们说他们必须使用 JQuery，因为这都是“前端”工作。

此外，他们还告诉我，对于特定的动画效果，例如元素的淡入和淡出等，他们希望使用 jQuery 和 Bootstrap。他们告诉我 AngularJS 不是动画的最佳解决方案，但它更适合操作网站的动态和实时信息......这准确吗？

在我看来，他们只是想找到不使用 AngularJS 并使用他们更熟悉的 JQuery 的方法。

Answer 1

AngularJS 中的动画可以使用它的一个名为 ngAnimate 的模块来实现，它通过向 HTML 元素添加 CSS 类来工作，但是您需要自己编写这些类，并且您将使用 CSS3 动画比 JQuery 动画更好性能，并且只需要纯 CSS。这是我一开始使用的，它似乎对我来说效果很好。然而，我发现，当我开始制作更复杂的动画时，我的 CSS 规则变得越来越大，特别是因为您必须在大多数 CSS 前面加上 -webkit -moz -o 等前缀。

此时我已准备好尝试替代方案，但我不想回到 jQuery。我发现的是GSAP 。它是一个非常强大且方便的动画 JavaScript 库，我可以使用指令将它完美地集成到 Angular 中。例如，我的一个项目中有这个:

    .directive('highlight', function() {
        return {
            scope: {},
            restrict: 'A',
            link: function(scope, element) {

                element.on('mouseenter', function() {
                    TweenMax.to(element, 0.5, {
                        color: '#000',
                        borderColor: '#000',
                        backgroundColor: '#F2F2F2'
                    });
                });
                element.on('mouseleave', function() {
                    TweenMax.to(element, 0.5, {
                        color: '#BDBDBD',
                        borderColor: '#BDBDBD',
                        backgroundColor: '#FFF'
                    });
                });
            }
        };
    })

如果我的 HTML 中有一个形状像按钮的链接，那么就像书写一样简单

<button highlight></button>

我有一个带有动画边框、文本颜色和背景颜色的按钮。此外，它是可重复使用的。我不必为 DOM 中的每个按钮编写突出显示规则。我只需添加属性highlight。

jQuery 可以工作，但它的动画很糟糕。 Angular 更好，但它很冗长，而且我个人不喜欢实现它。我倾向于 GSAP，因为它非常强大和灵活，同时还能为您的动画提供最佳性能。