Question

我为点击事件从屏幕右侧显示的叠加层创建了CSS转换。它的工作原理除了它首先在任何地方的初始点击屏幕上拍摄。它的初始位置在屏幕右侧：

.form_div {
  background-color: white;
  width: 25%;
  position: fixed;
  top: 0;
  right: 150%;
  height: 100%;
  display: block;
  z-index: 9999;
  padding: 2em;
  opacity: 1;
}

出现的转变是：

.show-form-div {
  left:71%;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

Here is a demo

错误出现在哪里？

Answer 1

我认为这是因为你的起始状态显示了dark-overlay。因此，第一个click会触发.dark-overlay div，而不是#xmarksthespot div。

你需要从：

开始

<div class="dark_overlay hide-modal"></div>

请参阅this update小提琴

CSS转换初始状态错误

1 个答案: