Question

我在div中有一个模态组件，它在hover上有一个transform：translate3d效果（有过渡！）。该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>

这是我的情况：https://jsfiddle.net/olivetum/bxwjb9co/

我决定添加css方法：not（.className）并将阻塞类绑定到父div。它可以解决问题，但模态进入/离开仍有一些小问题：https://jsfiddle.net/olivetum/3yrrnhsj/

任何想法如何消除这个故障？

Answer 1

<modal>元素位于<div> .absoluteDiv内，.absoluteDiv样式/动画与模态样式/动画冲突。如果您将<div>与.absoluteDiv放在<button>附近，那么它应该有用。

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

将鼠标悬停在div上的组件内，该div具有转换：translate3d对hover / Vue.js队列事件的影响（？）

1 个答案: