CSS transitions not triggering on dynamically added elements in Vue 3
I'm working on a Vue 3 application where I want to apply a CSS transition to elements that are dynamically added to the DOM using `v-if`. However, the transition doesn't seem to trigger when these elements are inserted. I've tried using the `transition` component from Vue, but the transition only works on elements that are present during the initial render. Here's a simplified version of my code: ```vue <template> <div> <button @click="addItem">Add Item</button> <transition name="fade"> <div v-if="showItem" class="item">New Item</div> </transition> </div> </template> <script> export default { data() { return { showItem: false, }; }, methods: { addItem() { this.showItem = true; }, }, }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` When I click the button, the item appears, but there is no fading effect; it just pops in immediately. I've also checked that my CSS is correctly targeting the `.fade` classes. I tried using `nextTick` to ensure that the state change was processed before the transition was applied, but that didn't solve the scenario. I also confirmed that there are no conflicting styles or JavaScript errors in the console. Is there a specific way to ensure that transitions work correctly on dynamically added elements in Vue 3, or is there something I'm missing in my implementation?