Переход между 2 видами назад и вперед

Question

Я использую магистраль. У меня 1 модель с 2 видами. DOM заполнен GradSmallViews вы нажимаете 1, и все они уходят, addClass (непрозрачность: 0), но они все еще находятся в DOM. Я хотел бы добавить класс, который имеет отображение: none, но затем это заменит оставшуюся часть перехода.

Но я отвлекся ... что еще важнее, Когда прозрачность GradSmallViews выведена, создается экземпляр GradFullView (не уверен, как это сделать). Когда вы нажимаете на нее, она переходит из (непрозрачность AddClass: 0 + left), а GradSmallViews возвращаются (addClass opacity: 1); это все работает нормально. Когда вы пытаетесь повторить этот процесс, он не работает. Я установил, что, когда вы нажимаете GradSmallView (removeClass opacity: 1), должно случиться. Класс удаления мерцает, добавляется 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; 
} 

Backbone/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}); 

} 

}) 

Я знаю, что это что-то просто. Это сводит меня с ума. Заранее спасибо за вашу помощь.

Answer 1

Проблема была в том, что у меня был переход CSS, который не работал, о котором я забыл, что противоречило Javascript add/removeClass.