我在div内部有一个骨干视图。我希望它淡入和缩小,就像动画一样http://tympanus.net/Development/ModalWindowEffects/(请参阅淡入和缩放动画)
我希望div(长达 2 页)在用户单击按钮时淡入并缩放。当用户单击第二个按钮(关闭按钮)时,它应该反转效果(淡出和缩小)并消失(显示:无)。
我有以下 CSS。当我单击第一个按钮时,淡入和缩放有效,但是当我单击第二个按钮时,反向效果不起作用。
有人可以看看吗?
@keyframes fadeInScale {
0%{
opacity:0;
transform: scale(0.5);
display: block;
}
100%{
opacity:1;
transform: scale(1);
display: block;
}
}
.overlay {
position: relative;
top: -$headerHeight;
z-index: 1000;
height: 100%;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: none;
animation: fadeInScale 0.3s 1 reverse;
}
这是Jquery:
当用户单击打开页面的按钮 (div) 时:
this.overlayView.$el.removeClass('fade-scale-out').addClass('fade-scale-in');
this.overlayView.render();
当用户单击关闭按钮关闭页面 (div) 时:
this.overlayView.$el.removeClass('fade-scale-in').addClass('fade-scale-out');
尝试对打开页面的部分进行以下修改,然后查看关闭页面部分是否有效。我的猜测是渲染覆盖了添加到$el的淡入淡出类。
this.overlayView.$el.removeClass('fade-scale-out');
this.overlayView.render();
this.overlayView.$el.addClass('fade-scale-in');