javascript - 如何在 AngularJS 应用程序中使用量角器禁用动画？

Question

正如量角器页面上所建议的那样，我尝试在我的配置文件中添加以下内容：

onPrepare: function() {

    var disableNgAnimate = function() {
        angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
            $animate.enabled(false);
        }]);
    };

    browser.addMockModule('disableNgAnimate', disableNgAnimate);

    browser.getCapabilities().then(function(caps) {
        browser.params.browser = caps.get('browserName');
    });
}

它并没有关闭动画。

我正在处理一个充满动画的网站，这让我的测试变得很糟糕..

PS 我正在使用 Protractor 的 TypeScript 定义，这有关系吗？

Answer 1

You disabled just ng-animations.

For me is much better to make animation duration 1ms instead of turning it off. (becuse of some animation event handlers in code)

Try code below it will accelerate CSS animation, so it can solve your problem

onPrepare: function () {
    // disable animations when testing
    var disableAnimation = function () {
        angular.module('disableAnimation', []).run(function ($animate) {

            // disable css animations
            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = '* {' +
                '-webkit-transition-duration: 1ms !important;' +
                '-moz-transition-duration: 1ms !important;' +
                '-o-transition-duration: 1ms !important;' +
                '-ms-transition-duration: 1ms !important;' +
                'transition-duration: 1ms !important;' +
                '-webkit-animation-duration: 1ms !important;' +
                '-moz-animation-duration: 1ms !important;' +
                '-o-animation-duration: 1ms !important;' +
                '-ms-animation-duration: 1ms !important;' +
                'animation-duration: 1ms !important;' +
                '}';
            document.getElementsByTagName('head')[0].appendChild(style);

            // disable angular ng animations
            $animate.enabled(false);
        });
    };

    browser.addMockModule('disableAnimation', disableAnimation);
}