

onsen uiで以下の機能を実装したいと考えています。

タブ切り替え時のアニメーションにons-
navigatorの画面遷移時に設定できる"slide"のようなアニメーションでタブを切り替えたいと考えているのですが、ons-
tabbarのオプションには"slide"が設定できないので他の方法で実装したいのですが、実装方法がわかりません。

上記実装をonsen uiでどのようにすればよろしいのでしょうか？  
ご存知の方がいらっしゃいましたら、ご教授のほどよろしくお願いします。


CC BY-SA 3.0
2016-07-19T03:01:54.773
27721
2020-01-22T09:02:10.293
17206
question
monaca onsen-ui angularjs
<ons-tab>タブをタップした時のアニメーションを変更したい(カスタマイズ）


[replacePageで画面遷移する際のアニメーションの方向を変えたい](https://ja.stackoverflow.com/questions/16634/replacepage%E3%81%A7%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%96%B9%E5%90%91%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84)

と同様のやり方でカスタマイズすることができます。  
既存の`fade(TabbarFadeAnimator)`は`Onsen UI Ver.1.3.17`の`onsenui.js`
13580行にありますので、それらや`ons-tabbar`の動作を解析し、スライド処理を実装してください。

[code]

    var app = ons.bootstrap("myApp", ["onsen"]);
    app.factory("TabbarSlideAnimator", ["TabbarAnimator", function(TabbarAnimator) {
        var TabbarSlideAnimator = TabbarAnimator.extend({
            // スライド処理
            //
            //
        });
        return TabbarSlideAnimator;
      }]);
    app.run(function(TabbarView, TabbarSlideAnimator) {
        // slideを追加
        TabbarView.registerAnimator("slide", new TabbarSlideAnimator());
    });
    
[/code]


CC BY-SA 3.0
2016-07-19T09:41:29.837
27730
2016-07-19T09:41:29.837
2017-04-13T12:52:39.113
-1
9566
27721
answer