Question

我在Sencha Touch有一个小组。在面板内我有一个按钮。现在当我点击按钮时，我想用自定义css动画增加面板的宽度。这是我到目前为止所尝试的内容。

Sencha Touch代码：

xtype:'panel'
id:'mypanel',
style:'width:300px;-webkit-transition:width 2s;transition:width 2s;'
items:
      [
        {
            xtype:'button',
            text:'Expand',
            id:'expand'
        }
      ]

Controller.js //点击按钮

 Ext.getCmp('mypanel').addCls("expand");

Custom.css

.expand
{
width:600px;
}

面板的内部风格，我给了一些动画。但它不起作用。任何帮助表示赞赏。

Answer 1

您需要删除内联样式。并使用2个css类。

<强> Mypanel.js

 Ext.define('MyApp.view.MyPanel', {
 extend: 'Ext.Panel',

 config: {
     centered: true,
     cls: 'colapse', // Initialy added cls class
     id: 'mypanel',
     items: [
         {
             xtype: 'button',
             itemId: 'mybutton',
             text: 'MyButton'
         }
     ],
     listeners: [
         {
             fn: 'onMybuttonTap',
             event: 'tap',
             delegate: '#mybutton'
         }
     ]
  },

 onMybuttonTap: function(button, e, eOpts) {
    Ext.getCmp('mypanel').setCls('expand');  // resetting style on button tap
}

});

<强> custom.js

.expand
{
width:600px;-webkit-transition:width 2s;transition:width 2s;
}

.colapse
{
width:300px;-webkit-transition:width 2s;transition:width 2s;
}

在上面的代码中，我最初将cls“colapse”添加到面板上，并在按钮点击事件中使用以下代码“Ext.getCmp（'mypanel'）将cls设置为”展开“到面板.setCls （ '扩大'）”。

如何在Sencha Touch中为元素添加自定义CSS动画？

1 个答案: