我已经创建了一个模态框,并且工作正常!之后,我决定使用 css 关键帧插入 fadeInUp 效果。但是,在这样做之后,模态框失去了居中位置。
谁能帮我解决这个问题吗?提前致谢!
最佳答案
在您的演示中,您添加了一个 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;
}
}
您会得到相同的效果,但不会覆盖居中偏移!
关于jquery - 模态框与 css 关键帧冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21418634/