如何禁用v-text-field标签动画及Vuetify全局动画？

一、禁用v-text-field的标签动画 #

你之前使用的.v-input *选择器优先级不足，因为Vuetify的标签元素（包含浮动标签和占位标签）有更具体的类或内联样式控制动画效果。可以通过以下两种方式解决：

1. 精准CSS选择器 #

直接针对标签元素设置样式，确保优先级足够覆盖默认动画：

/* 覆盖v-text-field的两个标签元素动画 */
.v-input .v-label,
.v-input .v-label__overlay {
  transition: none !important;
  animation: none !important;
}

如果只需要禁用单个组件的标签动画，可以给目标v-text-field添加自定义类，避免影响全局：

<v-text-field class="no-label-animation" label="测试输入框"></v-text-field>

对应的CSS：

.no-label-animation .v-label,
.no-label-animation .v-label__overlay {
  transition: none !important;
  animation: none !important;
}

2. 主题配置方式 #

在Vuetify全局配置中，直接修改标签的过渡效果：

// vuetify.js 配置文件
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    transitions: {
      // 将标签过渡设置为none，直接禁用动画
      label: 'none'
    }
  }
})

二、全局禁用所有Vuetify动画 #

如果需要关闭所有Vuetify组件的动画效果，有两种可靠实现方式：

1. 全局默认配置 #

在Vuetify初始化时，通过defaults全局禁用所有组件的过渡动画：

// vuetify.js 配置文件
import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    global: {
      transitions: 'none'
    }
  }
})

2. 全局CSS覆盖 #

如果配置方式不生效，可通过全局CSS强制禁用所有相关动画：

/* 禁用所有Vuetify组件的过渡与动画 */
*[class*="v-enter"],
*[class*="v-leave"],
*[class*="v-transition"],
.v-label,
.v-label__overlay,
.v-input__slot,
.v-select__selections,
.v-btn,
.v-card {
  transition: none !important;
  animation: none !important;
}

该选择器覆盖了大部分Vuetify组件的动画类，确保所有过渡和动画效果都被禁用。

内容的提问来源于stack exchange，提问作者Alexander Nenashev