Question

我正在使用Backbone.js和棘轮构建移动应用程序。路由器使用该方法更改视图。现在我想在从一个视图切换到另一个视图时添加动画。我试过这段代码，你可以帮个忙。

编辑：我想添加经典动画，以便在iPhone上更改页面。我试着这样做：

查看：

var SettingsView = Backbone.View.extend({
tagName:  "section",
className: "pt",
initialize: function(){
},

render: function(){
  var template = _.template($('#settingsview-template').html(),{});
  this.$el.html(template);
  return this;
},


getAnimEndEventName: function(){
    var animEndEventNames = {
        'WebkitAnimation' : 'webkitAnimationEnd',
        'OAnimation' : 'oAnimationEnd',
        'msAnimation' : 'MSAnimationEnd',
        'animation' : 'animationend'
    };
    return animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
},

open: function(){
var _this = this;
  this.$el.addClass("animated bounceInLeft");
},
close: function(){
    var _this = this;
    this.$el.addClass("animated bounceOutLeft").on(this.AnimEndEventName, function(){
    _this.removeClass("animated bounceInLeft, animated bounceOutLeft"); 
});
}
});

路线：

settingsViewPage: function(){              

   var view = new SettingsView(); 
   $(".container").html(view.render().el);
   this.currentView.close();
   view.open();
   this.currentView = view;            
},

我从控制台收到错误：

未捕获的TypeError：无法读取属性＆＃39;关闭＆＃39;未定义的

Answer 1

我不知道您想要使用哪种动画，但可以在渲染视图之前调用它。

路由器文件中的这类内容。

路线：{ ＆＃34;＆＃34; ：＆＃34; startPage＆＃34;，＆＃34; PageHome＆＃34; ：＆＃34; homePage＆＃34;，＆＃34; PageShow＆＃34; ：＆＃34; showViewPage＆＃34; }，

startPage: function(){
    //HERE START THE ANIMATION.
    var view = new StartView(); 
    $(".container").html(view.render().el);  
            // STOP THE ANIMATION            
},

homePage: function(){
    //HERE START THE ANIMATION.
    var view = new HomeView(); 
    $(".container").html(view.render().el);   
    // STOP THE ANIMATION           
},

Answer 2

错误在这里完成，但我不明白在哪里

close: function(){
        var _this = this;
        this.$el.addClass("animated bounceOutLeft").on(this.AnimEndEventName, function(){
        _this.removeClass("animated bounceInLeft, animated bounceOutLeft"); 
    });

查看Backbone中的转换

2 个答案: