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 に答える