आगे और पीछे 2 विचारों के बीच संक्रमण

मैं रीढ़ की हड्डी का उपयोग कर रहा हूँ। मेरे पास 2 विचारों वाला 1 मॉडल है। डीओएम GradSmallViews से भरा है आप 1 पर क्लिक करते हैं और वे सभी दूर जाते हैं, addClass (अस्पष्टता: 0), लेकिन वे अभी भी डोम में हैं। मैं एक वर्ग को जोड़ना चाहता हूं जो प्रदर्शित करता है: तब कोई भी नहीं जो शेष संक्रमण को पीछे छोड़ देता है।

लेकिन मैं digress ... और अधिक महत्वपूर्ण बात है, जब GradSmallViews अस्पष्टता को बाहर करता है, तो GradFullView को तुरंत चालू किया जाता है (सुनिश्चित नहीं है कि इसे कैसे बदला जाए)। जब आप उस पर क्लिक करते हैं, तो यह संक्रमण (addClass अस्पष्टता: 0 + बाएं) और GradSmallViews वापस आते हैं (addClass अस्पष्टता: 1); यह सब ठीक काम कर रहा है। जब आप प्रक्रिया को दोहराने का प्रयास करते हैं तो यह काम नहीं करता है। मैंने यह सेट अप किया है कि जब आप GradSmallView (removeClass अस्पष्टता: 1) पर क्लिक करते हैं तो ऐसा होना चाहिए। निकास वर्ग बाहर निकलता है, addClass झिलमिलाहट, और फिर यह वापस कैसे चला जाता है; अस्पष्टता पर removeClass: 1 प्रभावी नहीं होता है और addClass अस्पष्टता: 0 या तो नहीं है।

कोड यहाँ है - सीएसएस

.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;
}

रीढ़/जे एस

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

}

 })

मुझे पता है यह कुछ आसान है। यह मुझे पागल कर रहा है। आपकी सहायता के लिये पहले से ही धन्यवाद।

0
इसलिए जब भी आप FullView() जाते हैं तो आप एक नया GradFullView बना रहे हैं। सुनिश्चित करें कि एक नया प्रारंभ करने से पहले GradFullView को पूरी तरह से डोम से हटा दिया गया है, या आप ईवेंट को कई बार बाध्य किया जाएगा! (यह झटके का कारण हो सकता है)
जोड़ा लेखक Yurui Ray Zhang, स्रोत

1 उत्तर

समस्या यह थी कि मेरे पास एक सीएसएस संक्रमण था, जो काम नहीं कर रहा था जिसे मैं भूल गया था, जो जावास्क्रिप्ट को जोड़ने/निकालने के लिए संघर्ष कर रहा था।

0
जोड़ा