Ionic - 禁用导航栏的动画
Ionic - disable animation for nav bar
我的应用有静态 header。这意味着它在所有视图中都保持不变。
问题是,当我使用 <ion-nav-bar>
指令时,每次视图更改时 header 都会设置动画。
在 IOS 上并没有那么糟糕,因为整个都在滑入,但在 Android 上它看起来像在闪烁。
如何完全禁用动画?
我已经尝试在 app.config
部分使用 $ionicConfigProvider.navBar.transition('none');
,但它实际上使情况变得更糟(也在 IOS 上闪烁)。
我创建了一个简单的 codepen(默认转换显示为 IOS,但如果您在 chrome 上打开开发人员控制台并更改为 android您可以看到闪烁的设备)。
如果你真的不知道如何解决这个问题。
可以修改转场函数
首先,在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')
};
};
如果您使用的是 Ionic 2 或更高版本,请仅使用以下 CSS:
.toolbar{
.title, button{
opacity: 1!important;
transform: none!important;
}
}
我的应用有静态 header。这意味着它在所有视图中都保持不变。
问题是,当我使用 <ion-nav-bar>
指令时,每次视图更改时 header 都会设置动画。
在 IOS 上并没有那么糟糕,因为整个都在滑入,但在 Android 上它看起来像在闪烁。
如何完全禁用动画?
我已经尝试在 app.config
部分使用 $ionicConfigProvider.navBar.transition('none');
,但它实际上使情况变得更糟(也在 IOS 上闪烁)。
我创建了一个简单的 codepen(默认转换显示为 IOS,但如果您在 chrome 上打开开发人员控制台并更改为 android您可以看到闪烁的设备)。
如果你真的不知道如何解决这个问题。
可以修改转场函数
首先,在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')
};
};
如果您使用的是 Ionic 2 或更高版本,请仅使用以下 CSS:
.toolbar{
.title, button{
opacity: 1!important;
transform: none!important;
}
}