javascript - Vue 元素类转换

Question

我正在尝试在两个不同的 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;
}

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

我的问题是是否可以使用过渡，特别是两个类之间的不透明度淡入淡出？我不是添加或删除元素，只是更新类，因此我在使用 Vue 转换类时遇到问题。

Answer 1

通过在每个 css 类顶部的背景图像之前添加 transition: background-image 2s; 解决了这个问题。