1

假设我想将 Ext js 4 面板围绕 Y 轴旋转 180 度。（例如 - 单击此页面上标有“3D 旋转”的方块）

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

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

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

谢谢

4

1 回答 1

2

AbstractComponent'sanimate 方法文档（和代码）显示它专门处理 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);

您可以在此 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;
}
于 2012-09-02T11:49:37.023 回答