代码之家 › 专栏 › 技术社区 › KorbenDose

Vue Transition无法使用v-autocomplete

vuetify.js vuejs3 css

KorbenDose · 技术社区 · 1 年前

我正在尝试使用Vue的有条件地显示或隐藏选择文本字段 Transition 。尽管如此,文本字段仍会弹出并在没有任何转换的情况下离开。

<template>
  <Transition
    v-if="isActive"
    name="fade"
  >
    <v-autocomplete
      :items="[1,2,3]"
    ></v-autocomplete>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false); // This will be toggled in a different location of the code
</script>


<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

我尝试过不同的方法,比如 v-if 在 v-autocomplete 组件,而不是 过渡 ,但我无法让它运转起来。以下是上的一个示例 Vuetify Playground

我做错了什么?如果不可能 过渡 ,我怎么能达到同样的结果呢?

1 回复 | 直到 1 年前

rozsazoltan 1 年前

您应该添加 v-if 它的第一个孩子,而不是过渡。

<Transition name="fade">
  <v-autocomplete
    v-if="isActive"
    :items="[1,2,3]"
  ></v-autocomplete>
</Transition>

Vue Example for Transition using -Vue文档

const { createApp, ref } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  setup() {
    const isActive = ref(true)
    
    return { isActive }
  }
})
app.use(vuetify).mount('#app')

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-btn @click="isActive = !isActive">Toggle</v-btn>
  <Transition name="fade">
    <v-autocomplete
      v-if="isActive"
      :items="[1,2,3]"
    ></v-autocomplete>
  </Transition>
</div>