fix(tab): transitions #901
Conversation
Codecov Report
@@ Coverage Diff @@
## dev #901 +/- ##
=========================================
- Coverage 38.7% 38.68% -0.02%
=========================================
Files 69 69
Lines 2377 2378 +1
Branches 685 685
=========================================
Hits 920 920
- Misses 1300 1301 +1
Partials 157 157
Continue to review full report at Codecov.
|
Remove `v-if` as it impossible to use both `v-if` and `v-show` on one component, and in case `v-if` transitions applied with artifacts
lib/components/tab.vue
Outdated
| @@ -7,8 +7,7 @@ | |||
| :aria-hidden="localActive ? 'false' : 'true'" | |||
| :aria-expanded="localActive ? 'true' : 'false'" | |||
| :aria-lablelledby="controlledBy || null" | |||
| v-if="localActive || !lazy" | |||
| v-show="localActive || lazy" | |||
| v-show="localActive" | |||
There was a problem hiding this comment.
what if this was:
v-if="localActive || !lazy"
v-show="localActive"Would that make a difference?
Some people may not want any child components of a tab rendered if not visible.
There was a problem hiding this comment.
if there's a v-show, then element will be rendered anyway
There was a problem hiding this comment.
but if only v-if stay... transitions are buggy...
There was a problem hiding this comment.
then .. judgement is simple- v-show is the only case when this component works just like original BS4
There was a problem hiding this comment.
But removing the lazy part will always render with v-show (but just have display:none; set), so the content of the tabs will always be in the dom (and potentially active) even though not visible, which may not be the desired state for some users
There was a problem hiding this comment.
Maybe if we move the lazy part to the tab content slot? So the tab itself is always present 9but hiding with v-show), but the content inside can be taken out of DOM via a v-if?
There was a problem hiding this comment.
What about this:
v-show="localActive"
ref="panel"
>
<template v-if="localActive || !lazy">
<slot></slot>
</template>
</component>
There was a problem hiding this comment.
Check updated file... seems to work, at least at playground
There was a problem hiding this comment.
the catch is we must spread active and show classes in time...
Seems, found a solution
Make it transition again
Attempt to fix #504