17、Ext JS 动画效果全解析

Ext JS 动画效果全解析

1. 基本动画方法

在 Ext JS 中，有多种动画方法可以为元素添加动态效果。
- slideOut ：可以指定目标元素向特定方向滑出，例如右上角。使用时需要注意周围元素，非绝对定位的文本和其他元素可能会在滑动过程中被推动。
- switchOff ：这是一种将元素从屏幕上移除的方法。它结合了两个动作：首先元素稍微淡化以表示效果开始，然后元素从顶部和底部慢慢收缩直到消失。这种两阶段效果可以在元素真正消失之前吸引用户的注意力。使用示例如下：

Ext.get('target').switchOff();

此方法没有独特的参数，默认使用预定义的效果。但后续可以通过配置选项来完全控制效果。例如，在网站的监控屏幕中，当访客会话过期时，可以使用 switchOff 方法将其从列表中移除，先快速闪烁提示，然后再进行收缩过渡。
- shift ： Ext.Fx.shift 方法与 ghost 和 slideOut 类似，但有所不同。该方法没有默认行为，直接调用不会产生效果：

Ext.get('target').shift();

要使用 shift 方法，需要传入一