vue 运用动画添加背景色

要在Vue中添加动画并改变背景颜色，可以使用Vue的transition组件和CSS过渡属性。以下是一个示例：

首先，在Vue模板中，可以使用transition组件包裹需要添加动画的元素，并在组件上添加name属性以便在CSS中使用：

<transition name="fade">
  <div class="box" :style="{backgroundColor: backgroundColor}"></div>
</transition>

其中，box是需要添加动画的元素，backgroundColor是背景颜色的变量。

接下来，在CSS中，可以使用Vue内置的过渡类名和CSS过渡属性来添加动画效果：

.fade-enter-active, .fade-leave-active {
  transition: background-color 0.5s;
}

.fade-enter, .fade-leave-to {
  background-color: white;
}

上面的代码中，.fade-enter-active和.fade-leave-active是Vue内置的过渡类名，用于指定过渡效果的持续时间和动画类型。在这里，我们使用了CSS的transition属性来指定了背景颜色的过渡效果，并设置了持续时间为0.5秒。

.fade-enter和.fade-leave-to则用于指定元素进入和离开过渡时的样式，这里我们将背景颜色设置为白色。

这样，当backgroundColor变量发生改变时，就会触发动画效果，从而实现添加背景色的动画效果。