dojo 中的动画 PopupMenuItem

Question

我想将动画应用到 dojo PopupMenuItem

下面是我创建弹出窗口的方式

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，你可以在下面link:

了解更多

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

dojo 中的动画 PopupMenuItem

Animate PopupMenuItem in dojo

dojo