fix: don't fade incoming background when fading header #127
Conversation
Codecov Report
@@ Coverage Diff @@
## master #127 +/- ##
=======================================
Coverage 93.47% 93.47%
=======================================
Files 36 36
Lines 736 736
Branches 189 182 -7
=======================================
Hits 688 688
Misses 40 40
Partials 8 8Continue to review full report at Codecov.
|
| @@ -101,8 +101,8 @@ export function forFade({ | |||
| }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle { | |||
| const progress = add(current.progress, next ? next.progress : 0); | |||
| const opacity = interpolate(progress, { | |||
| inputRange: [0, 1, 2], | |||
| outputRange: [0, 1, 0], | |||
| inputRange: [0, 1, 1.9999, 2], | |||
There was a problem hiding this comment.
What's the reason to have 1.9999 instead of changing 0 to 1 in the outputRange?
There was a problem hiding this comment.
It is to hide the screen when the transition is finished. I can remove it if it's not necessary.
|
@satya164 yeah it should achieve the same thing but I feel |
|
It's not the same thing, changing background opacity only means the text still cross-fades. Also |
|
@satya164 I see what you mean. I updated the code. |
satya164
changed the title
During a cross-fade, the header on the back should still have
opacity=1to prevent the header become translucent and avoid anything in the back showing up.The problem with the current animation is that opacities of layers are multiplied instead of added. Two white view with
opacity=0.5on top of each other isn't equivalent to one white view withopacity=1.