openui5でタブストリップにカスタムトランジションを追加

Question

navcontainerのようにナビゲーションをカスタマイズすることができます。つまり、ビューをスクロールして左から右に変更する場合は、navcontainerのように新しいページでスワイプします。

Answer 1

あなたはどのあなたがサポートしているブラウザに応じて、ベンダープレフィックスとCSSを追加する必要があり、アプリケーション

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

ノートに次のCSSを追加することにより、比較的容易に効果でスライドを達成できます。

現在表示されているタブの外にスライドを達成するためには、これを達成することができトリッキー、1つの可能な方法で、次のコードは、お使いのコントローラのの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がタブストリップコントロールのインスタンスであると仮定しています。 UI5アプリケーション内で直接DOMを変更することはよくありませんが、この場合は、表示されたタブのコンテンツが削除され、クリックされたタブのコンテンツに置き換えられても安全である可能性が高いので、スライドアウトするまでアニメーションは完了です。

あなたはhttp://jsbin.com/vukibiで働く例を見ることができます - 上記のコードは、CSSでtabstrip exampleから直接取得されていて、JSは