身体抢夺者的入侵:骨干视图淡入并缩小

Invasion of the body snatchers: Backbone view fade in and scale out

本文关键字：视图 淡入 缩小 入侵      更新时间：2023-09-26

我在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');

相关文章：