Ionic - 禁用导航栏的动画

时间:2015-12-08 21:19:09

标签: android ionic navbar

我的应用有一个静态标题。意思是它在所有视图中保持不变。 问题是,当我使用<ion-nav-bar>指令时,每次视图更改时都会对标头进行动画处理。 在IOS上它并没有那么糟糕,因为整个滑入,但在Android上它看起来像是闪烁。

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

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

2 个答案:

答案 0 :(得分:3)

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

您可以修改过渡功能

首先,在app.config部分

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

然后,修改离子过渡函数

$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')
    };
};

答案 1 :(得分:0)

如果您使用的是Ionic 2或更高版本,请仅使用以下CSS:

.toolbar{
    .title, button{
        opacity: 1!important;
        transform: none!important;
    }
}