Skip to content

Commit

Permalink
Fix 2539 (#2644)
Browse files Browse the repository at this point in the history
## Description

Fixes #2539: 

* #2539

## Changes

* In `EntryExitTransition` class changed durations of animations from 0 to duration of exiting animation

### Before


https://user-images.githubusercontent.com/50801299/142418790-e1e9d0df-4a43-482a-bb8e-ce7386fd7e25.mov


### After


https://user-images.githubusercontent.com/50801299/142418613-f921a164-8e20-47c4-94fa-5dd9458e0fa0.mov


## Test code and steps to reproduce

<details>
<summary>Test case</summary>
<p>

```tsx
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import Animated, { 
    combineTransition, 
    ZoomOut, 
    ZoomIn, 
    SlideOutDown, 
    SlideInUp, 
    SlideInDown,
    StretchInX,
    StretchOutX,
    RotateOutDownLeft,
    RotateInDownLeft,
    RotateInDownRight,
    RollOutRight,
    RollInRight,
    FadingTransition,
    CurvedTransition,
    JumpingTransition,
    SequencedTransition,
    LightSpeedOutLeft,
    LightSpeedInLeft,
    FlipOutXUp,
    FlipInXDown,
    FlipInXUp,
    FadeOut,
    FadeIn
} from "react-native-reanimated";

export function TestScreen() {
    const [baseHeight, setBaseHeight] = useState(1);
    const [buttonTitle, setButtonTitle] = useState("alpha");
    const defaultDuration = 800;

    const transition = combineTransition(
        ZoomOut.duration(defaultDuration),
        ZoomIn.duration(defaultDuration),
        // or different configuration
    )

    return (
        <View style={{display: 'flex'}}>
            <Button 
                onPress={() => {
                    setButtonTitle(buttonTitle == "alpha" ? "omega" : "alpha");
                    setBaseHeight(Math.random())
                }}
                title="Change layout"
            />
            <Animated.Text style={{height: baseHeight * 100}}>
                {baseHeight}
            </Animated.Text>
            <Animated.Text
                layout={transition}
            >
                {baseHeight}
            </Animated.Text>
            <Animated.Text style={{height: baseHeight * 100}}>
                {baseHeight}
            </Animated.Text>
            <Animated.View
                layout={transition}
            >
                <Button
                    onPress={() => {
                        setButtonTitle(buttonTitle == "alpha" ? "omega" : "alpha");
                    }}
                    title={buttonTitle}
                />
            </Animated.View>
        </View>
    );
}
```

</p>
</details>

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
  • Loading branch information
kkafar committed Nov 23, 2021
1 parent ee741b9 commit bbf78f7
Showing 1 changed file with 5 additions and 5 deletions.
Expand Up @@ -122,7 +122,7 @@ export class EntryExitTransition
transformProp as keyof TransformProperty
]
: 0,
{ duration: 0 }
{ duration: exitingDuration }
),
value[transformProp as keyof TransformProperty]
)
Expand Down Expand Up @@ -183,19 +183,19 @@ export class EntryExitTransition
animations: {
originX: delayFunction(
delay + exitingDuration,
withTiming(values.originX, { duration: 0 })
withTiming(values.originX, { duration: exitingDuration })
),
originY: delayFunction(
delay + exitingDuration,
withTiming(values.originY, { duration: 0 })
withTiming(values.originY, { duration: exitingDuration })
),
width: delayFunction(
delay + exitingDuration,
withTiming(values.width, { duration: 0 })
withTiming(values.width, { duration: exitingDuration })
),
height: delayFunction(
delay + exitingDuration,
withTiming(values.height, { duration: 0 })
withTiming(values.height, { duration: exitingDuration })
),
...animations,
},
Expand Down

0 comments on commit bbf78f7

Please sign in to comment.