Vuetify: убрать переход цвета из v-icon - PullRequest
Новая
       8

Vuetify: убрать переход цвета из v-icon

1 голос
/ 22 апреля 2020

У меня есть меню с пунктами меню, состоящими из значка и текста, с парящим цветом, стилизованным под css ниже: 

.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 Ответ

1 голос
/ 22 апреля 2020

Добавление 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-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>
...