在 sapui5 中切换 class

Question

我正在学习sapui5，我要设计一个页面。此页面必须包含列表视图。我将定义一条线或图像。此图像必须移到列表的下方。此议案将在特定日期和时间开始。

这是我的 class，我想将 first 切换为 motion.

.first{
    width: 100%;
    height: 3px;
    position: relative;
}
/*Kayan buton */
.motion {

    width: 100%;
    height: 3px;
    background: red;
    position: relative;
    -webkit-animation: mymove 10s infinite ; /* Chrome, Safari, Opera */
    animation: mymove 10s ;
    animation-delay: 0s;
    border-radius: 15px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    0%{left :0px;top: 0em; opacity:0%;}
    100% {left:0px;top: 35em; opacity:0.7%;}
}

我在ajanda.view.xml文件中定义图像。

<Image src="img/red-line.png" class="first" id="imgRed"></Image>

最后，ajanda.controller.js 文件：

我尝试了很多组合，但都没有用：

这个：

   var container = this.$();
   container.find(".first").parent().addClass("motion");

这个：

   $( ".first" ).toggleClass("motion");

并且：

   var oImage = new sap.ui.commons.Image(sap.ui.getCore().byId("imgRed"));
   oImage.addStyleClass("motion");
   oImage.setDecorative(false);
   oImage.placeAt("content");

Answer 1

这应该完全没问题：

var oImage = sap.ui.getCore().byId("imgRed");
oImage.toggleStyleClass("motion");

如果您处于基于组件的环境中，您可能需要使用 this.byId("imgRed"); 而不是 sap.ui.getCore().byId("imgRed");。

如果您只是使用 UI5 来丰富您的站点代码，则应该如下所示：

// where "content" is the ID of the HTML-Element the UI5 control should be rendered in
var oImage = new sap.ui.commons.Image("imgRed", {
  src: "img/red-line.png"
}).addStyleClass("first").placeAt("content");
oImage.toggleStyleClass("motion");

在 sapui5 中切换 class

Toggle class in sapui5

html

css

jquery

sapui5