Vue中如何实现图片的折叠和展开动画？

<template>  <div>    <button @click="toggleImage">Toggle Image</button>    <transition name="image-transition">      <img v-if="showImage" src="path/to/image.jpg" alt="Image">    </transition>  </div></template><script>export default {  data() {    return {      showImage: false    }  },  methods: {    toggleImage() {      this.showImage = !this.showImage    }  }}</script><style>.image-transition-enter-active,.image-transition-leave-active {  transition: opacity 0.5s;}.image-transition-enter,.image-transition-leave-to {  opacity: 0;}</style>

<template>  <div>    <button @click="toggleImage">Toggle Image</button>    <div :class="imageClasses"></div>  </div></template><script>export default {  data() {    return {      showImage: false    }  },  computed: {    imageClasses() {      return {        'image-collapsed': !this.showImage,        'image-expanded': this.showImage      }    }  },  methods: {    toggleImage() {      this.showImage = !this.showImage    }  }}</script><style>.image-collapsed {  width: 0px;  height: 0px;  opacity: 0;  transition: width 0.5s, height 0.5s, opacity 0.5s;}.image-expanded {  width: 300px;  height: 200px;  opacity: 1;  transition: width 0.5s, height 0.5s, opacity 0.5s;}</style>