android - Ionic - 禁用导航栏的动画

Question

我的应用程序有一个静态 header 。这意味着它在所有 View 中都保持不变。问题是当我使用 <ion-nav-bar>每次 View 更改时，标题都会动画化。在 IOS 上它并没有那么糟糕，因为整个都在滑入，但在 Android 上它看起来像闪烁。

如何完全禁用动画？我已经尝试使用 $ionicConfigProvider.navBar.transition('none');在app.config部分，但它实际上使情况变得更糟(在 IOS 上也会闪烁)。

我创建了一个简单的 codepen (默认过渡显示为 IOS 的过渡，但如果您在 chrome 上打开开发人员控制台并更改为 android 设备，您可以看到闪烁)。

Answer 1

如果你真的不知道如何解决这个问题。

可以修改转换函数

首先，在app.config部分

$ionicConfigProvider.navBar.transition('android');

然后，修改 ionic 跃迁函数

$ionicConfigProvider.transitions.navBar.android = function(enteringHeaderBar, leavingHeaderBar, direction, shouldAnimate) {
    function setStyles(ctrl, opacity) {
        if (!ctrl) return;
        var css = {};
        // ionic original
        // css.opacity = opacity === 1 ? '' : opacity;

        // modify
        if (opacity === 1) {
            css.opacity = '';
            css.display = '';
        } else {
            css.opacity = opacity;
            css.display = 'none'; // let leavingHeaderBar immediately disappear
        }

        ctrl.setCss('buttons-left', css);
        ctrl.setCss('buttons-right', css);
        ctrl.setCss('back-button', css);
        ctrl.setCss('back-text', css);
        ctrl.setCss('title', css);
    }

    return {
        run: function(step) {
            setStyles(enteringHeaderBar.controller(), step);
            setStyles(leavingHeaderBar && leavingHeaderBar.controller(), 1 - step);
        },
        shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
    };
};