javascript - Vue元素类转换

我正在尝试在两个不同的CSS类之间进行转换，其中唯一的区别是背景图像。

Vue代码：

<div id="flip-list-demo" class="demo">
    <transition-group name="flip-list" tag="ol">
      <div v-for="item, in items" class="licontainer" v-bind:key="item.text">
        <li :data-shares="item.shares" :data-pos="item.datapos">
          <a href="#">
        {{ item.text }}
        </a>
        </li>
        <transition name="fade">
          <div :id = "'icon' + item.uid" :class="item.icon"></div>
        </transition>
      </div>
    </transition-group>
  </div>

CSS：

ol .red, .yellow, .green {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

ol .yellow {
    transition: background-image 2s;
  background-image: Long SVG code;
}

ol .green {
  transition: background-image 2s;
background-image: Long SVG code;
}

ol .red{
  transition: background-image 2s;
    background-image: Long SVG code;
}

icon属性将在Vue实例内部动态更新，该方法将触发重绘并更改图标。

我的问题是，是否有可能使用过渡，特别是两个类之间的不透明褪色？我不是在更新类时添加或删除项目，所以我在使用Vue过渡类时遇到了麻烦。

最佳答案

为什么不将类绑定到特定条件（请参见Vue文档https://vuejs.org/v2/guide/class-and-style.html），然后在CSS（https://www.w3schools.com/css/css3_transitions.asp）中使用transition属性？