在2個視圖之間來回切換

我正在使用主幹。我有1個模型和2個意見。 DOM中充滿了GradSmallViews 您點擊1，它們都會消失，addClass（不透明度：0），但它們仍然在DOM中。我想添加一個具有display的類：none，但是這會取代轉換的其餘部分。在2個視圖之間來回切換

但是我離題...更重要的是，當GradSmallViews不透明時，一個GradFullView被實例化（不知道如何轉換）。當你點擊它時，它會轉換出來（addClass opacity：0 + left），GradSmallViews返回（addClass opacity：1）;這一切都工作正常。當您嘗試重複該過程時，它不起作用。我已經設置了，當你點擊GradSmallView（removeClass opacity：1）應該會發生。 remove類閃爍，addClass閃爍，然後回到原來的樣子;不透明度上的removeClass：1不生效，addClass不透明度：0也不生效。

下面的代碼 - CSS

.go-away { 
left: 500px; 
opacity: 0; 
} 

.come-back { 
opacity: 1; 
} 

.grad-full { 
width: 963px; 
margin: 0 auto; 
position: relative; 
-webkit-transition: all .500s ease; 
} 

.grad-small { 
margin: 0 15px 50px; 
display: inline-block; 
background: #EAEAEA; 
box-shadow: 0px 0px 3px 1px #D3D3D3; 
padding: 33px; 
-webkit-transition: all 2s ease; 
}

骨幹/ JS

GradFullView = Backbone.View.extend({ 
template: _.template($('#grad-full-template').text()), 

className: 'grad-full', 

events: { 
    'click #x'   : 'backToSmallViews' 
}, 

initialize: function(){ 
    $('.goes-here').append(this.el); 

    this.render(); 
}, 

render: function(){ 
    this.$el.append(this.template({grad: this.model})); 
}, 

backToSmallViews: function(){ 

    this.$el.addClass('go-away'); 
    setTimeout(function(){$('.grad-full').remove()}, 600); 
    setInterval(function(){$('.grad-small').removeClass('go-away').addClass('come-back')}, 600);  
} 
}) 


GradSmallView = Backbone.View.extend({ 
template: _.template($('#grad-small-template').text()), 

className: 'grad-small', 

events: { 
    'click'   : 'goFullView' 
}, 

initialize: function(){ 
    $('.goes-here').append(this.el); 

    this.render(); 
}, 

render: function(){ 
    this.$el.append(this.template({grad: this.model})); 
}, 

goFullView: function(){ 
    $('.grad-small').removeClass('come-back').addClass('go-away'); 
    new GradFullView({model: this.model}); 

} 

})

我知道這是一些容易。這讓我瘋狂。在此先感謝您的幫助。

來源

2013-11-27 Ari

因此，您每次進入FullView（）時都會創建一個新的GradFullView。確保GradFullView的el在初始化完成之前完全從dom中移除，否則您的事件將被多次綁定！（這可能是閃爍的原因） –

問題是，我有一個CSS轉換，這是我忘記了，這是與Javascript添加/ removeClass衝突。

來源

2013-11-29 00:20:59 Ari

在2個視圖之間來回切換

回答

相關問題