mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
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 https://github.com/ionic-team/ionic-framework/pull/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. -->
This commit is contained in:
@ -12,9 +12,12 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
|
||||
* current breakpoint, then the backdrop should be fading in.
|
||||
*/
|
||||
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!;
|
||||
const initialBackdrop = shouldShowBackdrop
|
||||
? `calc(var(--backdrop-opacity) * ${staticBackdropOpacity ? 1 : currentBreakpoint!})`
|
||||
: '0';
|
||||
let initialBackdrop = '0';
|
||||
if (staticBackdropOpacity) {
|
||||
initialBackdrop = 'calc(var(--backdrop-opacity)';
|
||||
} else if (shouldShowBackdrop) {
|
||||
initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`;
|
||||
}
|
||||
|
||||
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
|
||||
|
||||
|
@ -1049,6 +1049,8 @@ interface ModalOverlayOptions {
|
||||
/**
|
||||
* The point after which the backdrop will begin
|
||||
* to fade in when using a sheet modal.
|
||||
* This option is ignored for the ionic theme
|
||||
* due to the option below.
|
||||
*/
|
||||
backdropBreakpoint: number;
|
||||
/**
|
||||
|
Reference in New Issue
Block a user