动画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

替代你可以使用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; 
    } 
}