Vuetify：从 v-icon 中删除颜色过渡

Posted 2023-02-22

【中文标题】Vuetify：从 v-icon 中删除颜色过渡

【英文标题】：Vuetify: remove color transition from v-icon

【发布时间】：2020-08-05 00:02:46

【问题描述】：

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

.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>

【参考方案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>