Animate PopupMenuItem in dojo - dojo

Question

I want to apply animation to dojo PopupMenuItem
here is code JS fiddle
Below is how i am creating popup
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

You can use CSS3 animation property.
Live example here:
https://jsfiddle.net/ntkhy9q3/13/
With right to left animation:
https://jsfiddle.net/ntkhy9q3/19/
You can learn more about animation in CSS3 here:
https://developer.mozilla.org/en/docs/Web/CSS/animation
Alternative you can use JS animation, using dojo/fx, you can learn more about it at the following link:
https://dojotoolkit.org/reference-guide/1.10/dojo/fx.html
In your specific case I would suggest you using CSS3 approach.
.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;
}
}