在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：

userPosts

延迟是由i.hover { transition: none; } 添加v-icon（默认为tranistion: .3s cubic-bezier(.25,.8,.5,1);）引起的。因此，这会导致transition-property: all的{​​{1}}延迟。