javascript - 在绝对定位的模态中滑动

Question

我创建了一个承载模态 div 的背景 div。

我已将模态 div 设置为具有 css:

.modal {
    opacity: 0.01;
    top: 20px;
    transition: all ease-in 200ms;
}

然后我创建了另一个类来添加它以显示它

.modal-open {
    top: 50px;
    opacity: 1;
}

但是，当将 open 类添加到 div 时，chrome 会显示属性被删除(即未生效或被覆盖)。

参见 codepen用于演示。您可以点击背景再次隐藏模态框。

为什么它不能正确转换？

Answer 1

因为您在 CSS 中将 .model-open 放在 .modal 之前。

.modal {
  position: absolute;
  z-index: 101;
  transition: all 300ms ease-in-out;
  top: 20px;
  opacity: 0.01;
  width: 500px;
  background-color: white;
  left: 50%;
  margin-left: -250px;
}

.modal-open {
  top: 50px;
  opacity: 1;
}

https://codepen.io/anon/pen/KvdZMa