Ext js 4动画样式

Question

假设我想将一个Ext js 4面板绕Y轴旋转180度。 （例如 - 点击标有＆＃39; 3D旋转＆＃39;在this page）的方块

我试图使用Ext.js element.animate方法并提供了＆＃39;到＆＃39;属性具有新的css属性但没有成功：

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

我很确定这是一种很好的方法。有没有人知道我可以看到在Ext js 4上用动画改变样式的例子？

感谢

Answer 1

AbstractComponent's动画方法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;
}