Question

我想将动画应用于dojo 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;
  }
}

在dojo中Animate PopupMenuItem

1 个答案: