在两个视图之间来回转换

Question

我正在使用主干网。我有一个模型，有两个视图。DOM中填充了GradSmallViews单击1，它们都消失了，addClass（opacity:0），但它们仍在DOM中。我想添加一个具有display:none的类，但它将取代转换的其余部分。

但我离题了。。。更重要的是，当GradSmallViews不透明度消失时，GradFullView被实例化（不确定如何转换）。当你点击它时，它会向外过渡（addClass不透明度：0+left），GradSmallViews会返回（addClass不透明性：1）；一切都很好。当你试图重复这个过程时，它是不起作用的。我已经设置好了，当你点击GradSmallView（removeClass opacity:1）时，应该会发生这种情况。remove类闪烁，addClass闪烁，然后它又回到原来的样子；opacity:1上的removeClass不起作用，addClass opacity: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});
}
 })

我知道这很容易。它把我逼疯了。提前感谢您的帮助。

Answer 1

问题是我有一个CSS转换，它不起作用，我已经忘记了，它与Javascript add/removeClass冲突。