Skip to content

Commit

Permalink
Fix FadingTransition (#6183)
Browse files Browse the repository at this point in the history
## Summary

This PR aims to fix some unexpected behaviour during `FadingTransition`.

| before | after |
| --- | --- |
| <video
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/e855c796-a926-48bf-b55d-80014694043d"
/> | <video
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/004bd2f6-2bb7-41b2-af1d-6d98a94908c0"
/> |

Expected behavior:
- The component stays in the original position.
- Starts the fade-out animation.
- Wen component is invisible, changes position to the target position.
- Starts the fade-in animation.

In the previous approach, when the `delayFunction` was not specified
(when no one called `.delay()`), the component jumped to the final
position after 50ms instead of waiting until the component became
invisible.

## Test plan

I tested it on the example from
#6151
  • Loading branch information
piaskowyk authored Jul 1, 2024
1 parent 90fe8d3 commit 188de25
Showing 1 changed file with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use strict';
import { withSequence, withTiming } from '../../animation';
import { withDelay, withSequence, withTiming } from '../../animation';
import type {
ILayoutAnimationBuilder,
LayoutAnimationFunction,
Expand Down Expand Up @@ -49,21 +49,21 @@ export class FadingTransition
withTiming(1, { duration })
)
),
originX: delayFunction(
originX: withDelay(
delay + duration,
withTiming(values.targetOriginX, { duration: 50 })
withTiming(values.targetOriginX, { duration: 0 })
),
originY: delayFunction(
originY: withDelay(
delay + duration,
withTiming(values.targetOriginY, { duration: 50 })
withTiming(values.targetOriginY, { duration: 0 })
),
width: delayFunction(
width: withDelay(
delay + duration,
withTiming(values.targetWidth, { duration: 50 })
withTiming(values.targetWidth, { duration: 0 })
),
height: delayFunction(
height: withDelay(
delay + duration,
withTiming(values.targetHeight, { duration: 50 })
withTiming(values.targetHeight, { duration: 0 })
),
},
callback,
Expand Down

0 comments on commit 188de25

Please sign in to comment.