hover/Vue.jsキューイベント（？）でtranslate3dエフェクトを使用するdiv内のコンポーネントにカーソルを合わせる

Question

hoverにtransform：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>のまわりに.absoluteDivと<div>を置くと、それはうまくいくはずです。

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