javascript - 入侵的 body 抢夺者 : Backbone view fade in and scale out

Question

我在一个 div 中有一个主干 View 。我希望它淡入淡出，就像动画一样 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');

Answer 1

尝试对打开页面的部分进行以下修改，然后查看关闭页面部分是否有效。我的猜测是渲染器正在覆盖添加到 $el 的淡入淡出类。

this.overlayView.$el.removeClass('fade-scale-out');
this.overlayView.render();
this.overlayView.$el.addClass('fade-scale-in');