如何禁用ExtJS 6.6.0 TabPanel的标签切换动画？

你使用ExtJS 6.6.0创建了如下TabPanel组件：

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    items: [
        {
            title: 'Home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            html: 'Contact Screen'
        }
    ]
});

你希望禁用标签切换动画，实现点击后立即切换的效果，但尝试设置hideMode: 'clip'并未生效。正确的实现方式是配置animation: false——TabPanel的切换动画由animation配置项控制，而非hideMode。

修改后的完整代码如下：

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    animation: false, // 禁用切换动画
    items: [
        {
            title: 'Home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            html: 'Contact Screen'
        }
    ]
});

添加animation: false后，点击标签时内容区会直接切换，无过渡动画，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Dimi