VueJS/Vuetify：使用动画/过渡更改宽度

Answer 1

我认为你使用观察者的方式是错误的。 在这里我展示了我如何看待你的情况，但我不确定它是否正常工作。 如果还有更多问题可以在评论里回复我

<template>
  <v-app id="inspire">

    <v-main>
      <v-container fluid>
        <v-row>
          <v-col :cols="columnCount">
            <worldmap></worldmap>
          </v-col>

        </v-row>
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
import WorldMap from "./components/WorldMap";
import { mapState } from 'vuex'
export default {
  props: {
    source: String
  },
  components: {
    worldmap: WorldMap
  },
  computed: {
    ...mapState({
      lineData: state => state.lineData.data.length
    }),
    columnCount() {
      if (this.lineData > 0) {
      return 9
      }
      return 12
    }
  },
  data: () => ({
    drawer: null
  }),
};
</script>

Answer 2

我只需添加一个设置了过渡属性的类即可获得网格大小以对其宽度进行动画处理。

<template>
  <v-app>
    <v-container>
      <div>
        <v-row>
          <v-col>
            <v-btn @click="updateColSize(8,4)">8,4</v-btn>
            <v-btn @click="updateColSize(6,6)">6,6</v-btn>
            <v-btn @click="updateColSize(4,8)">4,8</v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col :cols="colsize1" class="animateMe">
            <v-text-field
              color="red"
              placeholder="Testing"
              variant="solo-filled"
            ></v-text-field>
          </v-col>
          <v-col :cols="colsize2" class="animateMe" color="primary">
            <v-text-field
              color="red"
              placeholder="Testing"
              variant="solo-filled"
            ></v-text-field>
          </v-col>
        </v-row>
      </div>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  const colsize1 = ref(6)
  const colsize2 = ref(6)

  const updateColSize = (col1, col2) => {
    colsize1.value = col1
    colsize2.value = col2
  }
</script>

<style>
  .animateMe {
    transition: all 1s;
  }
</style>

https://play.vuetifyjs.com