Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function TransitionBehavior() {
cards={[
{
description: [
'**Transition behavior** determines whether the transition is applied to **discrete properties**. By default, `transitionBehavior` is `normal`, which applies transition only to **continuous properties** and discrete property changes are **applied immediately**. `allowDiscrete` allows transitions to be applied to **discrete properties**, resulting in **delayed changes**.',
'**Transition behavior** determines whether the transition is applied to **discrete properties**. By default, `transitionBehavior` is `normal`, which applies transition only to **continuous properties** and discrete property changes are **applied immediately**. `allow-discrete` allows transitions to be applied to **discrete properties**, resulting in **delayed changes**.',
'Discrete-animated properties generally flip between two values **at the midpoint** of the animation, except for the `display` property, which is changed at the moment of the **transition start**.',
],
items: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ type CSSTransitionBehavior = 'normal' | 'allow-discrete';

### Values

#### `allowDiscrete`
#### `allow-discrete`

Allows transitions to be applied to discrete properties, resulting in delayed changes.

Expand All @@ -58,14 +58,14 @@ import TransitionBehaviorSrc from '!!raw-loader!@site/src/examples/css-transitio
<InteractiveExample
src={TransitionBehaviorSrc}
component={TransitionBehavior}
label="Comparison between allowDiscrete and normal"
label="Comparison between allow-discrete and normal"
/>

## Remarks

- Discrete style properties (like `flexDirection`, `justifyContent`) can't be smoothly animated using the `transitionProperty` property. For example, you can't animate smoothly from `alignItems: start` to `alignItems: center`. You can use [Layout Animations](/docs/layout-animations/layout-transitions) to animate discrete style properties instead.

- When using `allowDiscrete` the discrete properties flip between two values at the midpoint of the animation, except for the `display` property, which is immediately at the moment of the transition start.
- When using `allow-discrete` the discrete properties flip between two values at the midpoint of the animation, except for the `display` property, which is immediately at the moment of the transition start.

## Platform compatibility

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Use this if you want the animation to start delayed (value in milliseconds)

#### `interpolation`

Specify the transition timing curve. Possible values are: `linear`, `ease-in`, `ease-out`, `ease-in-out`
Specify the transition timing curve. Possible values are: `linear`, `easeIn`, `easeOut`, `easeInOut`

#### `propagation`

Expand Down