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

Here is a demo

哪里错误出现？

Answer 1

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

您需要使用开始了：

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

见this update你的小提琴