使用“动态宽度”时如何将过渡应用于v对话框，这意味着width =“ unset”？

Question

bounty到期在3天内。这个问题的答案有资格获得+ 50声望赏金。Thien Ly正在寻找来自信誉良好的来源的答案。

基本上，我正在创建一个包含在v对话框中的表单组件。表单组件将具有基于选择输入呈现的不同子组件。因此，我必须将v对话框的宽度设置为“未设置”，以便对话框的宽度可以拉伸以匹配其内容。

当我切换width的值时，过渡有效，例如：450px或300px。问题是我事先不知道对话框中包含的表单宽度，因此我绝对需要使用动态宽度。

顺便说一句，我所说的过渡是宽度的过渡，固定宽度的码本显示出很好的过渡，但动态宽度没有。

到目前为止，当使用动态宽度时，我仍然找不到实现过渡的方法。我试图使用refs获取表单组件的宽度，但是将width设置为unset可以防止过渡。顺便说一句，我所说的过渡是宽度的过渡，当使用固定宽度时，它显示了很好的过渡，但对于动态宽度却不是。

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog v-model="dialog" width="unset">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">
            Click Me
          </v-btn>
        </template>
        <v-card>
          <v-select v-model="selectedForm" :items="items">
          </v-select>
          <div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
          <div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="dialog = false">
              I accept
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</div> 

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      selectedForm: "form-a",
      items: ["form-a", "form-b"],
      dialog: false
    };
  }
});
使用固定宽度的代码笔：https://codepen.io/duongthienlee/pen/MWaBLXm使用动态宽度的codepen：https://codepen.io/duongthienlee/pen/GRpBzmL注意，在我用Codepen制作的示例中，我已经定义了宽度，但实际情况是我事先不知道form-a和form-b​​组件的宽度。

基本上，我正在创建一个包含在v对话框中的表单组件。表单组件将具有基于选择输入呈现的不同子组件。所以我必须设置宽度...

Answer 1

我认为类似这样的方法可以为您服务。

Answer 2

如果我对您的理解正确，那么可以使用CSS来完成。您可以尝试将所有固定宽度替换为