動畫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; 
    } 
}