Ext js 4 стили анимации

Предположим, я хочу повернуть панель Ext js 4 на 180 градусов вокруг оси Y. (Например, щелкните квадрат с надписью «3D-поворот» на этой странице)

Я пытался использовать метод Ext.js element.animate и предоставил атрибут "to" с новым атрибутом css, но безуспешно:

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

Я почти уверен, что есть хороший способ сделать это. Кто-нибудь знает ресурс, на котором я могу увидеть примеры изменения стиля с анимацией в Ext js 4?

спасибо


animation css extjs extjs4.1
person Assaf    schedule 02.09.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

AbstractComponent's метод анимации документы (и код) покажите, что он обрабатывает исключительно x, y, top, left, width и height.

Использование 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 (сгенерированным компасом):

@-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;
}
person Izhaki    schedule 02.09.2012
comment
Выполнение затухания намного проще, чем то, что вы сделали. Моя проблема связана со стилями, такими как замена градусов rotateY, которые я не могу произнести, на «от» и «до». Или, если задать более прямой вопрос: как бы вы заменили не непрозрачность, а атрибут -webkit-transform? - person Assaf; 02.09.2012
comment
Ext.util.CSS .updateRule() может вам помочь. - person Izhaki; 02.09.2012
comment
Это то, что я искал. Большое спасибо! - person Assaf; 02.09.2012