Vue 元素类过渡答案

【问题标题】：Vue element class transitionVue 元素类过渡
【发布时间】：2018-07-23 00:21:34
【问题描述】：

我正在尝试在两个不同的 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 转换类时遇到了问题。

【问题讨论】：

标签： javascript css vue.js transition

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

当您在 dom 中更改类并需要转换时，必须这样做


<div :class="{active: true}" ></div>


div {
 background-color:red;
 transition:all 2s ease;
}

.active {

background-color: red;

}

【讨论】：