jquery - CSS 转换初始状态错误

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;
}

这是一个演示

错误是从哪里出现的？

Answer 1

我认为这是因为您的起始状态已dark-overlay显示。因此第一个click是在 div 上触发.dark-overlay，而不是在#xmarksthespotdiv 上触发。

您需要从以下内容开始：

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

查看您的小提琴的此更新