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你的小提琴