Vue中如何实现图片的动画和渐变效果？

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

<template>  <div>    <img :src="imageSrc" alt="your-image" :  style="max-width:90%" />    <button @click="changeStyle">Change Style</button>  </div></template><script>export default {  data() {    return {      imageSrc: "your-image-url",      bgColor: "red",      opacity: 1    };  },  methods: {    changeStyle() {      this.bgColor = "blue";      this.opacity = 0.5;    }  }};</script>