Question

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

<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类在必要时禁用动画。通常它工作正常，但有一个错误：如果取消选中该复选框，然后单击＆＃34;随机播放＆＃34;，然后选中该复选框，动画仍然无效。据我所知，使用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 bug吗？

Answer 1

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

他们提供的解决方法是向key添加transition-group属性：

<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

禁用过渡动画

1 个答案: