Question

我有一个菜单，其中包含图标和文本的菜单项，其悬浮颜色的样式如下所示：

.v-list-item:hover {
    background: #0091DA;
}

.v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon {
    color: white;
}

问题是文本颜色会立即变化，而图标颜色会随着过渡而变化，并且看起来确实很奇怪。

问题：是否可以删除v-icon上颜色变化的过渡？

请参阅下面的示例代码以解决该问题。

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

Vue.config.productionTip = false
Vue.config.devtools = false

.v-list-item:hover {
    background: #0091DA;
  }

  .v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon {
    color: white;
  }

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  
  <div id="app">
    <v-app>
      <v-content>
      
        <v-list dense>
          <v-list-item>
            <v-list-item-icon class="mr-0">
              <v-icon small>mdi-message-text</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Menu item 1</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon class="mr-0">
              <v-icon small>mdi-dialpad</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Menu item 2</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-icon class="mr-0">
              <v-icon small>mdi-call-split</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Menu item 3</v-list-item-title>
          </v-list-item>
        </v-list>
        
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Answer 1

在图标上添加transition: none似乎可以解决问题：

.v-list-item .v-icon {
  transition: none !important;
}

演示：

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

Vue.config.productionTip = false
Vue.config.devtools = false

.v-list-item:hover {
  background: #0091DA;
}

.v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon {
  color: white;
}
  
.v-list-item .v-icon {
  transition: none !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  
  <div id="app">
    <v-app>
      <v-main>

        <v-list dense>
          <v-list-item>
            <v-list-item-icon class="mr-0">
              <v-icon small>mdi-message-text</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Menu item 1</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon class="mr-0">
              <v-icon small>mdi-dialpad</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Menu item 2</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon class="mr-0">
              <v-icon small>mdi-call-split</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Menu item 3</v-list-item-title>
          </v-list-item>
        </v-list>
        
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Vuetify：从v-icon移除颜色过渡

1 个答案: