CODEWITHSUNDEEP
javascriptjquerycssbackbone.jscss-transitions
Ari
Ari

Reputation: 1703

Transitioning between 2 views back and forth

I'm using backbone. I have 1 model with 2 views. the DOM is filled with GradSmallViews you click 1 and they all go away, addClass(opacity: 0), but they're still in the DOM. I would like to add a class that has display:none but then that supersedes the rest of the transition.

But I digress... more importantly, when the GradSmallViews opacity out, a GradFullView is instantiated (not sure how to transition that). When you click on it, it transitions out (addClass opacity:0 + left)and the GradSmallViews come back (addClass opacity:1); that's all working fine. When you try to repeat the process it doesn't work. I have it set up that when you click on GradSmallView (removeClass opacity:1) is supposed to happen. The remove class flickers out, the addClass flickers in, and then it goes back to how it was; the removeClass on the opacity:1 doesn't take effect and the addClass opacity:0 doesn't either.

Here's the code - 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});

}

 })

I know this is something easy. It's driving me nuts. Thanks in advance for your help.

Upvotes: 0

Views: 129

Answers (1)

Ari
Ari

Reputation: 1703

The problem was that I had a CSS transition, that wasn't working that I had forgotten about, that was conflicting with the Javascript add/removeClass.

Upvotes: 0

Related Questions