我正在尝试对数据 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)顶部。
如何让它改变高度?谢谢。
最佳答案
尝试使用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()
}
});
}
});
}
});
关于sencha-touch - Sencha Touch 2 中的动画尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9872730/