Question

我想使用像这样的酷转换 - http://designdrizzle.com/15-amazing-page-transitions-effects-tutorials-in-jquery-and-css3/ - 在单页骨干应用程序中，但我不知道从哪里开始。我是否必须更改实例化所有视图（目前是典型的swap_view方法）的方式才能实现这样的效果？或者是否有一个我没有找到的直接宝石？

在我的应用程序（translator.herokuapp.com）中，我保留标题，然后切换视图。

这是我第一次做前端工作，所以任何帮助都会受到赞赏！

Answer 1

首先让我们检查过渡网页的html标记：

<div id="pt-main" class="pt-perspective">
    <div class="pt-page">
    <div class="pt-page">
    <div class="pt-page">
    <div class="pt-page page-current">
    <div class="pt-page">
    <div class="pt-page">
</div>

正如您可以看到它与典型的滑块小部件非常接近，但具有全宽和高页面大小以及不同的动画。 “今日美国”网站正在使用非常接近的效果。

如何使用以及如何使用MArionette实现它：

1）我们需要两种视图类型（让我们调用CardsCollectionView和CardView）：

var CardView = Marionette.ItemView.extend({
        className: '.pt-page',
        template: "#card-template"
    }),
    CardsCollectionView = Marionette.CollectionView.extend({
        childView: CardView
    });

2）下一步我们需要捕捉一个在页面之间切换的事件，我会将它放入collectionView：

CardsCollectionView = Marionette.CollectionView.extend({
    childView: CardView,
    events: {
      'click .pt-page' : switchCard    
    },
    switchCard: function() {
        var currCard = this.$el.find('.pt-page.page-current'),
            nextCard = currCard.next() || this.$el.find('.pt-page').eg(0);

        currCard.removeClass('page-current');
        nextCard.addClass('page-current')
    }
});

3）为你需要的动画效果添加CSS类。

它的简单示例只是为了显示要遵循的逻辑步骤。请考虑您可以打印不同类型的页面，可能有模型来提供页面数据（在这种情况下，更好地保持模型中的当前页面位置）。还期望改进以移除其他卡但是当前和下一个用于动画效果。我强烈建议深入了解今日美国站点代码。它也使用BB，它在你的情况下非常有用。

Answer 2

我找到了使用简单动画制作此工作的第一步，并将我的路由器粘贴在下面，以帮助其他遇到同样问题的人/正在寻找一个简单的解决方案，而不需要在使用木偶时进行重大重组。< / p>

主要关注点是代码末尾的_swapView方法。

   TR.Routers.Router = Backbone.Router.extend({
    routes: {
        "": "home",
        "jobs/index": "indexJob",
        "jobs/new": "newJob",
        "jobs/:id": "showJob",
        "jobs/:id/download": "downloadJob",
        "home": "home",
        "profile": "profile",
        "translate": "translate",
        "charge": "charge",
        "contact": "contact"
  },

    showJob: function(id) {
        TR.jobs.fetch()
        var job = TR.jobs.getOrFetch(id)
        var view = new TR.Views.JobShow({model: job})
        this._swapView(view)
    },

    showUser: function(id) {
        TR.jobs.fetch();
        user = TR.users.getOrFetch(id)
        var view = new TR.Views.UserShow({
            model: user, collection: TR.jobs
        })

        this._swapView(view)
    },

    indexJob: function() {
        TR.jobs.fetch();
        TR.currentUser.fetch();
        var view = new TR.Views.JobsIndex({
            collection: TR.jobs,
            model: TR.currentUser
        })

        this._swapView(view)
    },

    newJob: function() {
        var view = new TR.Views.JobNew()
        this._swapView(view)
    },

    translate: function() {
        var view = new TR.Views.TranslateHome()
        this._swapView(view)
    },

    home: function() {
        var view = new TR.Views.Home()
        this._swapView(view)
    },

  _swapView: function (view) {
        var that = this
    if (this.currentView) { 
            this.currentView.$el.fadeOut(500, function() {
                that.currentView.remove()
            that.currentView = view;
                $('#main').html(view.render().$el.hide().fadeIn(500))
            //$('#main').html(view.render().$el);
            })
        } else {
        that.currentView = view;
        $('#main').html(view.render().$el);
        }
  }
});

单页骨干应用中视图之间的转换

2 个答案: