我们可以使用 animate() 更改面板的弹性吗

Posted 2023-02-26

【中文标题】我们可以使用 animate() 更改面板的弹性吗

【英文标题】：can we change flex of panel using animate()

【发布时间】：2014-04-04 11:19:53

【问题描述】：

我正在尝试通过animate() 更改面板的弹性。

我在 hbox 布局中有三个面板，每个面板都使用 flex 来动态消耗空间。

我可以通过动画改变面板的高度，但我不能改变 flex。

xtype: 'button',

id:'btn',
text: '>>',

handler : function() 
    var tptp = Ext.getCmp('Third_panel');

    //tptp.hide(500000000);

    tptp.animate(  

        dynamic :true,
        duration:10000,
        delay:25,
        easing:'elasticIn',
        type:'popOut',
    //from:
    //
    //flex:2
    //,
    to: 
        height: (tptp.getHeight() == 500) ? 0 : 500
        //flex:1
                                                                           
);

【问题讨论】：

请给我们一个小提琴。

【参考方案1】：

不，animate 函数不支持为 flex 设置动画。

不过还是有办法解决这个问题的。

您可以使用所需的 flex 计算出容器的宽度和 x 位置，并使用 animate 函数为宽度和 x 位置设置动画。但是，这不会更改您正在制作动画的面板内的内容，因此如果内容尚未修复，这将无法正常工作。

您可以将所有面板的 flex 乘以 100（或任何其他大数）并使用 setInterval 定期设置 flex，直到它通过设置动画元素的 flex 属性然后调用 updateLayout 到达目标 flex () 在父元素上。但是，这可能会非常慢，因为布局会在每一帧中更新。