sencha-touch - Sencha Touch 2 中的动画尺寸

Question

我正在尝试对数据 View 的高度进行动画处理，但它目前只是在视口(viewport)周围滑动面板，而不是将其保持在适当的位置并更改其高度。代码如下:

Ext.Anim.run(el, 'slide', {
  from: { height: height },
  to: { height: newHeight },
  out: false,
  direction: 'up',
  easing: 'ease-out',
  duration: 1000
});

例如，height=200、newHeight=100 将导致 dataview 立即下降，使其顶部位于视口(viewport)下方 200 像素处，然后动画回到视口(viewport)顶部。

如何让它改变高度？谢谢。

Answer 1

尝试使用Ext.Animator.run代替:

Ext.Animator.run({
    element: dataview.element,
    duration: 500,
    easing: 'ease-in',
    preserveEndState: true,
    from: {
        height: dataview.element.getHeight()
    },
    to: {
        height: 100
    }
});

在一个完整的示例中:

Ext.application({
    name: 'Sencha',

    launch: function() {
        var dataview = Ext.create('Ext.DataView', {
            fullscreen: true,
            style: 'background:red',
            store: {
                fields: ['text'],
                data: [
                    { text: 'one' },
                    { text: 'two' },
                    { text: 'three' }
                ]
            },
            itemTpl: '{text}'
        });

        Ext.Viewport.add({
            xtype: 'button',
            docked: 'top',
            handler: function() {
                Ext.Animator.run({
                    element: dataview.element,
                    duration: 500,
                    easing: 'ease-in',
                    preserveEndState: true,
                    to: {
                        height: 100
                    },
                    from: {
                        height: dataview.element.getHeight()
                    }
                });
            }
        });
    }
});