Animate PopupMenuItem в додзё

Question

Я хочу, чтобы применить анимацию к додзе PopupMenuItem

здесь код JS fiddle

Ниже, как я творю всплывающее окно

var pSubMenu2 = new Menu(); 
    pSubMenu2.addChild(new MenuItem({ 
    iconClass: "dijitEditorIcon dijitEditorIconCopy", 
    style: "display:inline-block" 
    })); 
    pSubMenu2.addChild(new MenuItem({ 
    iconClass: "dijitEditorIcon dijitEditorIconCut", 
    style: "display:inline-block" 

    })); 
    pMenu.addChild(new PopupMenuItem({ 
    iconClass: "dijitEditorIcon dijitEditorIconPaste", 
    popup: pSubMenu2 
    })); 

Answer 1

Вы можете использовать CSS3 свойство анимации.

Живой пример здесь:

https://jsfiddle.net/ntkhy9q3/13/

С справа налево анимации:

https://jsfiddle.net/ntkhy9q3/19/

Вы можете узнать больше о анимации в CSS3 здесь: https://developer.mozilla.org/en/docs/Web/CSS/animation

Alternative вы может использовать JS-анимацию, используя dojo/fx, вы можете узнать больше об этом на следующей ссылке:

https://dojotoolkit.org/reference-guide/1.10/dojo/fx.html

В вашем конкретном случае, я хотел бы предложить вам, используя CSS3 подход.

.dijitMenuItemIconCell { 
    height: 40px !important; 
    width: 40px !important; 
    text-align: center !important; 
    -webkit-animation: fadein 2s; 
    /* Safari, Chrome and Opera > 12.1 */ 
    -moz-animation: fadein 2s; 
    /* Firefox < 16 */ 
    -ms-animation: fadein 2s; 
    /* Internet Explorer */ 
    -o-animation: fadein 2s; 
    /* Opera < 12.1 */ 
    animation: fadein 2s; 
} 

@keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 


/* Firefox < 16 */ 

@-moz-keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 


/* Safari, Chrome and Opera > 12.1 */ 

@-webkit-keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 


/* Internet Explorer */ 

@-ms-keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 


/* Opera < 12.1 */ 

@-o-keyframes fadein { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
}