The child of a <transition> component should have changes to trigger the transition

• VUE_FIXED_TRANSITION_CHILD
• Error
• Medium
• vue

This rule applies when the child of a <transition> component does not have any changes to trigger the transition.

The <transition> component supports the changes incurred by the following:

1. Conditional rendering using v-if
2. Conditional display using v-show
3. Dynamic components
4. The key attribute value

For the transition effect to work, the above changes should be present in the child of <transition>, not the <transition> itself or its ancestors.

Note: The application of this rule is limited to projects using Vue 3.x version because in Vue 2.x, <transition> worked by accident when toggled from the outside.

Noncompliant Code Example

<template>
  <button v-on:click="toggle">Toggle</button>
  <transition name="fade" v-if="show">
    <div>Hello</div> <!-- VUE_FIXED_TRANSITION_CHILD alarm -->
  </transition>
</template>

<script>
  export default {
    data() {
      return { show: true };
    },
    methods: {
      toggle() {
        this.show = !this.show;
      }
    }
  }
</script>

Compliant Code Example

<template>
  <button v-on:click="toggle">Toggle</button>
  <transition name="fade">
    <div v-if="show">Hello</div>
  </transition>
</template>

<script>
  export default {
    data() {
      return { show: true };
    },
    methods: {
      toggle() {
        this.show = !this.show;
      }
    }
  }
</script>

Version

This rule was introduced in DeepScan 1.43.0.

See

• transition

• Enter & Leave Transitions