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 @click="show = !show">Toggle</button>
  <transition name="fade" v-if="show">
    <div>Hello</div> <!-- VUE_FIXED_TRANSITION_CHILD alarm -->
  </transition>
</template>

Compliant Code Example

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <div v-if="show">Hello</div>
  </transition>
</template>

Version

This rule was introduced in DeepScan 1.43.0.

See

• Built-in Components: <Transition>