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를 참조