Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Using both v-show and v-if on a transition will not trigger leave transition
See original GitHub issueVersion
2.5.17
Reproduction link
https://jsfiddle.net/w3vkqg4x/1/
Steps to reproduce
Use v-if and v-show under transition component:
<transition><expensive-child v-if="vif" v-show="vshow"></expensive-child></transition>
What is expected?
Changing v-if=false and keep v-show=true should trigger the leave transition.
What is actually happening?
The element just disappear without performing the leave transition.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Vue.js - Transitions between conditionals (v-if and v-else)
Your problem is caused by the fact that vue transition does not see the element change, it only sees the content change.
Read more >Transition | Vue.js
Vue offers two built-in components that can help work with transitions and animations in ... The enter or leave can be triggered by...
Read more >State Machine Diagram - UML 2 Tutorial - Sparx Systems
Transitions from one state to the next are denoted by lines with arrowheads. A transition may have a trigger, a guard and an...
Read more >An Interactive Guide to CSS Transitions - Josh W Comeau
Two properties — transform and opacity — are very cheap to animate. If an animation currently tweaks a property like width or left...
Read more >Figma Tip: Prototyping with "after delay" and ... - YouTube
In this Figma tip we cover using after delay and trigger after delay to make more robust prototypes with automatic transitions. These are...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Why should this be forbidden?
Using one or the other will leave the DOM element or remove it. This addresses the use case of sometimes needing to just hide the element and perform the transition while some other time needing to remove the element but also perform the transition.
It works as expected for enter transition, why shouldn’t it work for leave transition?
you shouldn’t use both v-if and v-show on a component, only one will do