使用 Vue JS 过渡组件时 mouseover 和 mouseout 行为异常答案

【问题标题】：mouseover and mouseout misbehaves when Vue JS transition component is used使用 Vue JS 过渡组件时 mouseover 和 mouseout 行为异常
【发布时间】：2021-08-15 10:54:37
【问题描述】：

我正在创建如下所示的弹出菜单

const menuItem = {
  props: ['name', 'val'],
  data() {
    return {
      showChild: false
    }
  },
  template: /*html */ `
    <div class="nav-item" @mouseover="showChild=true" @mouseout="showChild=false">
        <span v-if="typeof val === 'string' || val instanceof String">
            <a :href="val" target="_blank" rel="noopener noreferrer">{{name}}</a>
        </span>
        <div v-else>
            {{name}}
                <ul class="popup" v-show="showChild">
                    <li v-for="(link, name) in val">
                        <a :href="link" target="_blank" rel="noopener noreferrer">{{name}}</a>
                    </li>
                </ul>
        </div>
    </div>
    `
}

const app = Vue.createApp({
  components: {
    menuItem
  },
  data() {
    return {
      menu: {
        'Home': '#',
        'Services': {
          'Software Development': 'https://www.upwork.com/signup/create-account/client_contact_freelancer?ciphertext=~0142999d8b15001517&BYOC',
          'Business Training & Frenchise': 'https://www.badabusiness.com/dd/BIMK003866',
          'Organic Marketing Training & Affiliate Program': 'https://leads-arc.web.app/'
        },
        'Our Apps': {
          'All': 'https://play.google.com/store/apps/collection/cluster?clp=igM4ChkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDEhkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDGAA%3D:S:ANO1ljIhW_g&gsr=CjuKAzgKGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMSGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMYAA%3D%3D:S:ANO1ljJmSZ8',
          'Featured': 'https://play.google.com/store/apps/dev?id=5009060970068759882',
          'Srila Prabhupada Vani': 'https://play.google.com/store/apps/details?id=com.mayank.srilaprabhupadavani',
          'ChatEasy - Easy Messaging': 'https://play.google.com/store/apps/details?id=c.kapps.easymessage.free'
        },
        'Blogs': 'https://mayank-1513.medium.com/',
        'Contact Us': 'https://mayank-chaudhari.web.app/',
      },
    }
  }
})

app.mount('#app');

* {
  max-width: 1600px;
  margin: auto;
  transition: 0.2s all cubic-bezier(0.65, 0.05, 0.36, 1);
  color: #2c3e50;
  cursor: unset;
  box-sizing: border-box;
}

body,
html,
#app {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  max-width: 100%;
}

nav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  align-items: center;
  align-content: center;
  justify-content: center;
}

nav.tr {
  background: white;
  box-shadow: #5555 0 0 0 2px;
  height: 60px;
}

.nav {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px;
  height: 50px;
}

.nav-item {
  display: inline-block;
  position: relative;
  padding: 10px 0;
  margin: 20px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.nav-item * {
  text-decoration: none;
}

.nav-item:hover,
.popup li:hover,
.active {
  border-bottom: 2px solid #756aee;
  transform: translateY(-5%);
  filter: drop-shadow(0px 0px 15px #fff);
}

.nav img {
  height: 195%;
  margin: 0;
  cursor: pointer;
}

.nav img:hover {
  filter: drop-shadow(-4px 8px 10px #756aee);
  transition: all 0.1s;
}

.popup {
  position: absolute;
  list-style: none;
  padding: 15px;
  margin-top: 12px;
  margin-left: -10px;
  line-height: 38px;
  border-radius: 5px;
  box-shadow: 0px 0px 15px #0005;
  background: #fff;
  /* display: none; */
}

.nav-item:hover .popup {
  display: inherit;
}

<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>

<div id="app">
  <nav class="tr">
    <div class="nav">
      <span ref="spacer" class="spacer"></span>
      <menu-item :name="key" :val="val" v-for="(val, key) in menu" :key="'menu' + key" />
    </div>
  </nav>
</div>

这很好用。但是，当我尝试添加transition 组件并将ul.popup 包含在transition 组件中时，即使鼠标在弹出菜单上，它也无法正常运行并且不透明度变为0。下面是显示这个的sn-p。

const menuItem = {
  props: ['name', 'val'],
  data() {
    return {
      showChild: false
    }
  },
  template: /*html */ `
    <div class="nav-item" @mouseover="showChild=true" @mouseout="showChild=false">
        <span v-if="typeof val === 'string' || val instanceof String">
            <a :href="val" target="_blank" rel="noopener noreferrer">{{name}}</a>
        </span>
        <div v-else>
            {{name}}
            <transition name="fade">
                <ul class="popup" v-show="showChild">
                    <li v-for="(link, name) in val">
                        <a :href="link" target="_blank" rel="noopener noreferrer">{{name}}</a>
                    </li>
                </ul>
            </transition>
        </div>
    </div>
    `
}

const app = Vue.createApp({
  components: {
    menuItem
  },
  data() {
    return {
      menu: {
        'Home': '#',
        'Services': {
          'Software Development': 'https://www.upwork.com/signup/create-account/client_contact_freelancer?ciphertext=~0142999d8b15001517&BYOC',
          'Business Training & Frenchise': 'https://www.badabusiness.com/dd/BIMK003866',
          'Organic Marketing Training & Affiliate Program': 'https://leads-arc.web.app/'
        },
        'Our Apps': {
          'All': 'https://play.google.com/store/apps/collection/cluster?clp=igM4ChkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDEhkKEzUwMDkwNjA5NzAwNjg3NTk4ODIQCBgDGAA%3D:S:ANO1ljIhW_g&gsr=CjuKAzgKGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMSGQoTNTAwOTA2MDk3MDA2ODc1OTg4MhAIGAMYAA%3D%3D:S:ANO1ljJmSZ8',
          'Featured': 'https://play.google.com/store/apps/dev?id=5009060970068759882',
          'Srila Prabhupada Vani': 'https://play.google.com/store/apps/details?id=com.mayank.srilaprabhupadavani',
          'ChatEasy - Easy Messaging': 'https://play.google.com/store/apps/details?id=c.kapps.easymessage.free'
        },
        'Blogs': 'https://mayank-1513.medium.com/',
        'Contact Us': 'https://mayank-chaudhari.web.app/',
      },
    }
  }
})

app.mount('#app');

* {
  max-width: 1600px;
  margin: auto;
  transition: 0.2s all cubic-bezier(0.65, 0.05, 0.36, 1);
  color: #2c3e50;
  cursor: unset;
  box-sizing: border-box;
}

body,
html,
#app {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  max-width: 100%;
}

nav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  align-items: center;
  align-content: center;
  justify-content: center;
}

nav.tr {
  background: white;
  box-shadow: #5555 0 0 0 2px;
  height: 60px;
}

.nav {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px;
  height: 50px;
}

.nav-item {
  display: inline-block;
  position: relative;
  padding: 10px 0;
  margin: 20px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.nav-item * {
  text-decoration: none;
}

.nav-item:hover,
.popup li:hover,
.active {
  border-bottom: 2px solid #756aee;
  transform: translateY(-5%);
  filter: drop-shadow(0px 0px 15px #fff);
}

.nav img {
  height: 195%;
  margin: 0;
  cursor: pointer;
}

.nav img:hover {
  filter: drop-shadow(-4px 8px 10px #756aee);
  transition: all 0.1s;
}

.popup {
  position: absolute;
  list-style: none;
  padding: 15px;
  margin-top: 12px;
  margin-left: -10px;
  line-height: 38px;
  border-radius: 5px;
  box-shadow: 0px 0px 15px #0005;
  background: #fff;
  /* display: none; */
}

.nav-item:hover .popup {
  display: inherit;
}

.fade-enter-active,
.fade-leave-active {
    transition: all .5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>

<div id="app">
  <nav class="tr">
    <div class="nav">
      <span ref="spacer" class="spacer"></span>
      <menu-item :name="key" :val="val" v-for="(val, key) in menu" :key="'menu' + key" />
    </div>
  </nav>
</div>

我该如何解决这个问题？

【问题讨论】：

标签： javascript html css node.js vue.js

【解决方案1】：

我正在收听的活动存在问题。在此处添加详细答案，以帮助其他寻求类似问题解决方案的人。

请参阅 WC3 文档here

当鼠标指针进入 div 元素及其子元素时触发 mouseover 事件。只有当鼠标指针进入 div 元素时才会触发 mouseenter 事件。

将@mouseover 更改为@mouseenter 并将@mouseout 更改为@mouseleave 可以解决此问题。

【讨论】：

【解决方案2】：

尝试使用 @mouseenter 和 @mouseleave 组合

【讨论】：