Ext js 4 动画风格

Posted 2023-02-26

【中文标题】Ext js 4 动画风格

【英文标题】：Ext js 4 animating styles

【发布时间】：2012-09-02 10:06:12

【问题描述】：

假设我想将 Ext js 4 面板围绕 Y 轴旋转 180 度。 （例如 - 单击this page 处标有“3D 旋转”的正方形）

我尝试使用 Ext.js element.animate 方法并为“to”属性提供了新的 css 属性但没有成功：

button1.animate(
       duration: 2000,
        to:
            style :
                '-webkit-transform' : 'rotateY(180deg)'
            
        
    );

我很确定有一个很好的方法。有谁知道我可以看到在 Ext js 4 上使用动画更改样式的示例的资源？

谢谢

【参考方案1】：

AbstractComponent's animate 方法 docs（和代码）显示它专门处理 x、y、顶部、左侧、宽度和高度。

使用 Ext.util.CSS.updateRule

你可以为你的按钮定义这个 CSS 规则：

#btn 
    -webkit-transform: rotate(0deg);
​

然后执行如下操作：

var i = 0;                        
setInterval(function()
    i++;
    i = i % 360;
    Ext.util.CSS.updateRule('#btn', "-webkit-transform", "rotate(" + i + "deg)" );
 , 10); 

您可以在this JsFiddle 中看到类似的工作。

应用一个 CSS 动画类

通过调用：

button1.addCls( 'fadeIn' );

加上对应的css（由compass生成）：

@-webkit-keyframes fadeIn 
  from  opacity: 0; 
  to    opacity: 1; 


@-moz-keyframes fadeIn 
  from  opacity: 0; 
  to    opacity: 1; 


@-o-keyframes fadeIn 
  from  opacity: 0; 
  to    opacity: 1; 


@keyframes fadeIn 
  from  opacity: 0;   
  to  opacity: 1; 


.fadeIn 
  opacity: 0;
  -webkit-animation: fadeIn 0.5s ease-in 1;
  -moz-animation: fadeIn 0.5s ease-in 1;
  -o-animation: fadeIn 0.5s ease-in 1;
  animation: fadeIn 0.5s ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

【讨论】：

执行淡入比您所做的要容易得多。我的问题是样式，例如替换我不能用“from”和“to”发音的rotateY度数。或者，更直接地问它：你将如何替换 - 不是不透明度而是 -webkit-transform 属性？

Ext.util.CSS.updateRule() 可以帮到你。

这就是我要找的。非常感谢！