전환이있는 div 내부의 구성 요소에 마우스를 올려 놓습니다. 호버/Vue.js 큐 이벤트 (?)에서 translate3d 효과

Question

호브에서 변형 : translate3d 효과 (전환 포함)가있는 div 안에 모달 구성 요소가 있습니다. 해당 div는 vue.js 목록 렌더링 방법으로 렌더링됩니다. 내 모달을 열고 그 위에 마우스를 올려 놓으면 부모 div에게 순서대로 건너 뛰고 적절한 위치에 있습니다. https://jsfiddle.net/yyx990803/mwLbw11k/?utm_source=website&utm_medium=embed&utm_campaign=mwLbw11k

<button id="show-modal" @click="showModal = true">Show Modal</button> 
    <modal v-if="showModal" @close="showModal = false"> 
    <h3 slot="header">custom header</h3> 
    </modal> 

그리고 이것은 내 상황입니다 :

이 모달 작동합니다 어떻게하지 (.ClassName과) 및 부모 DIV에 클래스를 차단 바인딩 : https://jsfiddle.net/olivetum/bxwjb9co/

내가 CSS 방법을 추가하기로 결정했다. 그것은 트릭을하지만 모달 입력/이탈에 여전히 결함이 있습니다. https://jsfiddle.net/olivetum/3yrrnhsj/

어떻게 그 결함을 제거 할 수 있습니까?

Answer 1

<modal> 요소 .absoluteDiv와 <div> 내부 및 .absoluteDiv 스타일/애니메이션 모달 스타일/애니메이션과 충돌한다. <button> 주위에 <div>을 .absoluteDiv으로두면 제대로 작동합니다.

https://jsfiddle.net/o45gqj9o/3/