Question

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

这是我的课程，我希望将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中切换类

1 个答案: