在两个视图之间来回转换
Transitioning between 2 views back and forth
我正在使用主干网。我有一个模型,有两个视图。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});
}
})
我知道这很容易。它把我逼疯了。提前感谢您的帮助。
问题是我有一个CSS转换,它不起作用,我已经忘记了,它与Javascript add/removeClass冲突。
相关文章:
- 有没有一种方法可以在three.js中自定义纹理之间的转换
- 如何在Ionic Framework中实现选项卡页面之间的转换
- UI 路由器 - 在状态之间转换时记住滚动位置
- v8::值到日期之间的转换
- 标签之间的内容转换为标题JS
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- JavaScript函数,用于在全宽度和半宽度形式之间转换UTF8字符串
- 在 ng 重复的模型之间转换
- 如何在jquery-ui-datepicker和moment.js使用的日期格式之间转换
- 如何使用JMapProjLib、Proj4j或Proj4js在不同坐标系之间转换坐标
- 简单的jQuery幻灯片在幻灯片之间转换
- JQuery 数据选择器在格式之间转换
- 在 UTC 和特定时区之间转换时间 - 新的国际化 API
- Javascript:在数字范围之间转换,保持正确的比例
- 在javascript中的类型之间转换
- 如何在单击时在不同的身体背景之间转换?(尝试2)
- 使用jQuery在HTML页面之间转换
- Javascript-在Unicode字符串和ArrayBuffer之间转换
- 在类之间转换不起作用(CSS和jQuery)
- JavaScript通过Z索引在其他图像之上的图像之间转换