时间戳

首页 > 解决方案 > Vuetify：从 v-icon 中删除颜色过渡

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

问题描述

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

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

标签： cssvue.jsvuejs2css-transitionsvuetify.js

解决方案

添加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>

推荐阅读