Sencha Touch 2中的动画尺寸 [英] Animating dimensions in Sencha Touch 2

问题描述

我正在努力制作一个dataview的高度，但它目前只是将面板滑动到视口周围，而不是将其保持在适当的位置，并改变它的高度。代码如下：

I'm trying to animate the height of a dataview, but it's currently just sliding the panel around the viewport instead of keeping it in place and changing it's height. The code is as follows:

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立即下降，使其成为顶部在视口下方200px，然后动画回到视口的顶部。

For instance, height=200, newHeight=100 will result in the dataview dropping immediately so that it's top is at 200px below the viewport, and then animating back to the top of the viewport.

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

How can I get it to change the height? Thanks.

推荐答案

尝试使用 Ext.Animator.run / p>

Try using Ext.Animator.run instead:

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()
                    }
                });
            }
        });
    }
});

这篇关于Sencha Touch 2中的动画尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！