html - vuetify `v-icon` 可见性由 css 规则更改后滞后

Question

我在使用 vuetify 的 Vue 应用程序中有一个表。我创建了一个 CSS 选择器来显示 tr:hover 状态的图标，但是当鼠标离开该行时隐藏图标会有延迟。它只发生在图标(最后三行)上，任何其他元素(前三行)都会按预期显示和消失。 ( here is the codepen )

屏幕截图(当光标从底部向上移动时，在第一列中可以看到多个图标):

tr:hover .hover {
  visibility: visible;
}

.hover {
  visibility: hidden;
}

// ...

<div id="app">
  <v-app>
    <div class="container">
      <table class="center" cellspacing="0">
        <tr>
          <td> <span class="hover">A</span></td>
          <td> Row </td>
        </tr>
        <tr>
          <td> <span class="hover">A</span></td>
          <td> Row </td>
        </tr>
        <tr>
          <td> <span class="hover">A</span></td>
          <td> Row </td>
        </tr>
        <tr>
          <td>
            <v-icon class="hover">create</v-icon>
          </td>
          <td> Row </td>
        </tr>
        <tr>
          <td>
            <v-icon class="hover">create</v-icon>
          </td>
          <td> Row </td>
        </tr>
        <tr>
          <td>
            <v-icon class="hover">create</v-icon>
          </td>
          <td> Row </td>
        </tr>
      </table>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
})

Answer 1

将以下内容添加到您的 CSS:

i.hover {
  transition: none;
}

延迟是由 v-icon 添加 transition: .3s cubic-bezier(.25,.8,.5,1); 引起的，默认为 转换属性:全部。因此，这会导致 .3s 延迟可见性。