在 2 个视图之间来回转换

Question

我正在使用主干。 我有 2 个视图的 1 个模型。 DOM 充满了 GradSmallViews 您单击 1，它们都消失了，addClass(opacity: 0)，但它们仍在 DOM 中。我想添加一个具有 display:none 的类，但它会取代过渡的其余部分。

但我离题了……更重要的是， 当 GradSmallViews 不透明时，会实例化 GradFullView（不知道如何转换）。当你点击它时，它会转出（addClass opacity:0 + left）并且 GradSmallViews 回来（addClass opacity: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 冲突。