ExtJS 动画（Animate）

ExtJS element对象动画

渐入动画

//使用默认参数
els.fadeIn();

//自定义动画参数
els.fadeIn({ opacity: .75, duration: 2000});

//自定义动画参数
els.fadeIn({
    opacity: 1, //can be any value between 0 and 1 (e.g. .5)
    easing: 'easeOut',
    duration: 500
});

渐出动画

els.fadeOut();

//自定义动画参数
els.fadeOut({
    opacity: 0,
    easing: 'easeOut',
    duration: 2000,
    remove: false,
    useDisplay: false
});

元素隐藏动画

let els = Ext.select('#test');
//使用默认的配置项
els.puff();
//自定义配置项
els.puff({
    easing: 'easeOut',
    duration: 3000,
    useDisplay: true
});

又一个隐藏动画

els.switchOff({
    easing: 'easeIn',
    duration: 2000,
    remove: false,
    useDisplay: false
});

边缘滑入动画

// t = top, b = bottom, l = left, r = right
els.slideIn('t', {
    easing: 'easeOut',
    duration: 500
});

边缘滑出动画

els.slideOut('t', {
    easing: 'easeOut',
    duration: 500,
    remove: false,
    useDisplay: false
});

脉动动画

els.frame("#444", 10, {
    duration: 1000
});

边框动画

let els = Ext.select('#test');
els.frame("red", 3, {
    duration: 500
});

支持的配置项

useDisplay: Boolean: when this is set to false the element will be hidden using the hide method after the animation is complete, otherwise it will be hidden using setDisplayed(false), which uses the CSS display property. By setting this to true the element will not take up any space in the document after it is hidden.
duration: Number: this is the time (in milliseconds) that the animation will last.
easing: String: the easing of the animation is a description of how the animation should calculate the intermediate values for the process. This gives you the ability to alter how the animation changes speed during the animation. We can set this with values such as, backIn, easeIn, easeOut, bounceOut, or elasticeIn.

ExtJS 组件动画

Panel组件结合动画

let panel = Ext.create({
    xtype: 'panel',
    title: 'Panel',
    height: 100,
    width: 300,
    frame: true,
    html: 'abc',
    renderTo: Ext.getBody(),
});

let opt = {
    duration: 2000,
    easing: 'elasticIn',
    //callback: this.foo,
    scope: this
};

panel.animate({
    to: {
        width: (panel.getWidth() == 500) ? 700 : 500,
        height: (panel.getHeight() == 300) ? 400 : 300
    },
    duration: 2000,
});

消息框动画

var messageBox = Ext.Msg.alert('Alert', 'This Message Box has an animation');
messageBox.getEl().frame("red", 3, {
    duration: 500
});