jquery - 模态框与 css 关键帧冲突

Question

我已经创建了一个模态框，并且工作正常!之后，我决定使用 css 关键帧插入 fadeInUp 效果。但是，在这样做之后，模态框失去了居中位置。

谁能帮我解决这个问题吗？提前致谢!

Modal box with keyframe conflit DEMO

Original modal box DEMO

Answer 1

在您的演示中，您添加了一个 CSS 动画，其中包含以下内容:

keyframes fadeInUp {
     0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
     }
     100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

这会覆盖动画运行之前设置的翻译(-50%，-50%)。

如果将其更改为:

keyframes fadeInUp {
    0% {
        opacity: 0;
        margin-top: 20px;
    }       100% {
        opacity: 1;
        margin-top: 0;
    }
}

您会得到相同的效果，但不会覆盖居中偏移!

Demo here