禁用过渡动画

Question

在某些情况下如何禁用动画？

https://jsfiddle.net/4b3nxv7n/

<div id="flip-list-demo" class="demo" :class="{'animate': animate}">
  <button v-on:click="shuffle">Shuffle</button>
  <input type="checkbox" v-model="animate"/>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

new Vue({
  el: '#flip-list-demo',
  data: {
    animate: true,
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

.animate .flip-list-move {
  transition: transform 1s;
}

这是一个修改后的过渡组示例，带有用于切换动画的复选框。我在必要时使用 css 类来禁用动画。通常它工作正常，但有一个错误： 如果取消选中复选框，然后单击“随机播放”，然后选择复选框，动画仍然不起作用。 据我所知，使用 Chrome 开发工具转换类不适用于这种情况下的元素。

我尝试解决此问题的另一种方法是更改​​转换名称属性。但我有同样的错误。 https://jsfiddle.net/61vLtaxn/

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <input type="checkbox" v-model="animate"/>
  <transition-group :name="transitionName" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>
new Vue({
  el: '#flip-list-demo',
  data: {
    animate: true,
    items: [1,2,3,4,5,6,7,8,9]
  },
  computed: {
    transitionName: function () {
        return this.animate ? 'flip-list' : 'disabled-list'
    }
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})
.flip-list-move {
  transition: transform 1s;
}

我对转换的理解有问题还是这是 vue 错误？

Answer 1

这是一个错误，它一直是reported on their GitHub。

他们给出的解决方法是在transition-group 中添加key 属性：

<transition-group :name="transitionName" :key="transitionName" tag="ul">

Here's a fiddle

---

我发现的解决方法是显式添加一个 disabled-list-move 类（在您的第二个示例中），其转换几乎是瞬时的（transition: transform 0s 引起了同样的问题）：

.flip-list-move {
  transition: transform 1s;
}

.disabled-list-move {
  transition: transform 0.0000000001s;
}

Here's a fiddle