Skip to content

Commit bdb7cd6

Browse files
fix(modal): fix enter animation when the initial breakpoint value is less than the backdrop breakpoint (#29955)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? This PR aims to fix an issue introduced in #29932 where the enter animation for ionic theme was in a broken state when the modal's initial breakpoint value was lesser than the specified backdrop breakpoint. ## What is the new behavior? - The erroneous behaviour happened because the shouldShowBackdrop constant had a false value which was being taken into consideration when computing the backdrop opacity for the ionic theme. This PR fixes this by always transitioning the backdrop opacity from 0 to 0.7 once the modal appears, independently of the initial, current or activation breakpoint. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
1 parent 2d2b081 commit bdb7cd6

File tree

2 files changed

+8
-3
lines changed

2 files changed

+8
-3
lines changed

core/src/components/modal/animations/sheet.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
1212
* current breakpoint, then the backdrop should be fading in.
1313
*/
1414
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!;
15-
const initialBackdrop = shouldShowBackdrop
16-
? `calc(var(--backdrop-opacity) * ${staticBackdropOpacity ? 1 : currentBreakpoint!})`
17-
: '0';
15+
let initialBackdrop = '0';
16+
if (staticBackdropOpacity) {
17+
initialBackdrop = 'calc(var(--backdrop-opacity)';
18+
} else if (shouldShowBackdrop) {
19+
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`;
20+
}
1821

1922
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
2023

core/src/components/modal/modal.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,6 +1049,8 @@ interface ModalOverlayOptions {
10491049
/**
10501050
* The point after which the backdrop will begin
10511051
* to fade in when using a sheet modal.
1052+
* This option is ignored for the ionic theme
1053+
* due to the option below.
10521054
*/
10531055
backdropBreakpoint: number;
10541056
/**

0 commit comments

Comments
 (0)