Hover on component inside a div that has a transform: translate3d effect on hover / Vue.js queue events(?)

css vue.js vuejs2 css-transitions translate-animation

221 просмотра

1 ответ

6 Репутация автора

I have a modal component inside a div that has a transform: translate3d effect (with transition!) on hover. That div is rendered with vue.js list rendering method. When I open my modal and hover over it, it is snapping in turns to parent div and it's appropriate position.

This is how modal should work: 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>

And this is my situation: https://jsfiddle.net/olivetum/bxwjb9co/

I decided to add css method :not(.className) and bind blocking class to parent div. It does the trick but there is still some glitch on modal enter/leave: https://jsfiddle.net/olivetum/3yrrnhsj/

Any ideas how can I remove that glitch?

Автор: user8103342 Источник Размещён: 09.11.2017 12:03

Ответы (1)

1 плюс

300 Репутация автора

The <modal> element is inside the <div> with .absoluteDiv, and the .absoluteDiv styles/animations are conflicting with the modal styles/animations. If you put the <div> with .absoluteDiv around just the <button>, it should work.


Автор: rjmill Размещён: 09.11.2017 05:33
Вопросы из категории :