Question

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

Answer 1

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

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

身体抢夺者的入侵：骨干视图淡入并向外扩展

1 个答案: