CODEWITHSUNDEEP
javascriptanimationvue.jscss-transitionsvuejs2
Grigory
Grigory

Reputation: 43

Disable transition animation

How can I disable animation for for some cases?

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;
}

Here is a modified transition group example with checkbox to toggle animation. I use css class to disable animation when it is necessary. Commonly it works okay but there is a bug: if you unselect the checkbox, then click "Shuffle", then select the checkbox back, the animation still does not work. As far as I can see using Chrome dev tools transition classes are not applied to elements for this case.

Another way how I tried to solve this was to change transition name property. But I have the same bug. 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;
}

Do I understand something wrong about transition or this is vue bug?

Upvotes: 1

Views: 2904

Answers (1)

thanksd
thanksd

Reputation: 55664

It's a bug and it's been reported on their GitHub.

The workaround they gave was to add a key attribute to the transition-group:

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

Here's a fiddle

The workaround I found was to explicitly add a disabled-list-move class (to your second example) with an almost-instantaneously fast transition (transition: transform 0s caused the same issue):

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

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

Here's a fiddle

Upvotes: 2

Related Questions