Question

我正在使用骨干。我有1个型号，2个视图。 DOM填充了GradSmallViews 你单击1然后它们都会消失，addClass（不透明度：0），但它们仍然在DOM中。我想添加一个具有display：none但却取代其余转换的类。

但我离题了......更重要的是，当GradSmallViews不透明时，GradFullView被实例化（不确定如何转换）。单击它时，它会转出（addClass opacity：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;
}

骨干/ 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冲突。

来回转换2个视图

1 个答案: