Sapui5 在openui5中将自定义转换添加到tabstrip

之间的导航是否可以自定义为如中所示，即在选择选项卡时，视图应该从左向右滚动和更改，就像在navcontainer中使用新页面滑动导航一样。

通过向应用程序添加以下CSS，您可以相当轻松地实现幻灯片效果

@keyframes slidein {
  from { 
    right: -100%; 
  }
  to {  
    right: -6px; 
  }
}
.sapUiTabPanel {
  overflow:hidden;  
}
.sapUiTabPanel > * { 
  animation: slidein 500ms; 
  position: absolute;  
}

请注意，您可能需要添加带有供应商前缀的CSS，具体取决于您支持的浏览器

要实现从当前显示的选项卡中滑出有点棘手，一种可能的方法是在控制器的onInit方法中添加以下代码

oTabStrip1.attachBrowserEvent("mousedown",function(oEvent){
  var oTarget = oEvent.target;
  if(oTarget.className==="sapUiTabClose"){
    return;
  }
  var iIdx = oTabStrip1.getItemIndex(oTarget);
  if (iIdx > -1) {
    if ((iIdx !== oTabStrip1.getSelectedIndex()) && (oTabStrip1.getTabs()[iIdx].getEnabled())) {
      oEvent.stopPropagation();
      oEvent.preventDefault();
      jQuery.each(
      oTabStrip1.getTabs()[oTabStrip1.getSelectedIndex()].getContent(),function(i,o){
        var sAnimateLeft = (o.$().innerWidth() * -1) + "px";
        o.$().animate({left:sAnimateLeft},500);
      });
      setTimeout(function(){
        oTabStrip1.selectTabByDomRef(oTarget);
      },250);

    }
  }
});

以上假设oTabStrip1是tabstrip控件的实例。虽然直接在UI5应用程序中修改DOM通常不是一个好的做法，但在这种情况下，可能是安全的，因为显示的选项卡的内容被删除并替换为单击的选项卡内容，所以我们所做的只是将此延迟到滑出动画完成为止

---

您可以在上看到一个工作示例-代码直接取自，添加了上述CSS和JS

谢谢。然而，当我尝试它不工作的预期，你能告诉为什么。我向选项卡添加了一个tabstrip，并向特定的tabstrip添加了样式类，但它不起作用。CSS可能需要调整，具体取决于选项卡中的控件，例如您提供的示例，您可以添加以下样式：.dasboardTab{position:relative；}抱歉，我发送了错误的bin。这是我的车，它很好用。但是，在我的应用程序中实现相同的代码时，会出现一个小问题，即当第一次加载父选项卡时，幻灯片动画会出现两次，然后在使用或不使用mousedown的

事件处理程序后正常工作。如果不看到您的代码，很难说，但是，如果实际的滑动发生了2次，则控件最初有可能被渲染两次。mousedown的事件处理程序用于处理当前显示的选项卡的滑出效果，如果没有此功能，则只有滑入效果才能工作。