diff --git a/src/core/classes/page-transition.ts b/src/core/classes/page-transition.ts index af2b816390c..a27fa84c13c 100644 --- a/src/core/classes/page-transition.ts +++ b/src/core/classes/page-transition.ts @@ -12,41 +12,20 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { createAnimation } from '@ionic/angular'; -import { Animation, NavOptions } from '@ionic/core'; +import { TransitionOptions, createAnimation, getIonPageElement } from '@ionic/angular'; +import { Animation } from '@ionic/core'; /** - * Adaptation from Ionic 5 iOs transition. + * Adaptation from Ionic 7 iOs transition. * - * https://github.com/ionic-team/ionic-framework/blob/5.8.x/core/src/utils/transition/ios.transition.ts + * https://github.com/ionic-team/ionic-framework/blob/v7.5.6/core/src/utils/transition/ios.transition.ts * Removed large title options, translucent header, buttons-collapse and header-collapse-condense-inactive. * Changed large title check by collapsible header. */ const DURATION = 540; -const getIonPageElement = (element: HTMLElement): HTMLElement | null => { - if (element.classList.contains('ion-page')) { - return element; - } - - const ionPage: HTMLElement | null = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'); - if (ionPage) { - return ionPage; - } - - // idk, return the original element so at least something animates and we don't have a null pointer - return element; -}; - -export interface TransitionOptions extends NavOptions { - progressCallback?: ((ani: Animation | undefined) => void); - baseEl: HTMLElement; - enteringEl: HTMLElement; - leavingEl: HTMLElement | undefined; -} - -export const shadow = (el: T): ShadowRoot | T => el.shadowRoot || el; +const shadow = (el: T): ShadowRoot | T => el.shadowRoot || el; export const moodleTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): Animation => { const EASING = 'cubic-bezier(0.32,0.72,0,1)'; diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss index 6b2b08ffecb..923321dda3c 100644 --- a/src/core/components/loading/loading.scss +++ b/src/core/components/loading/loading.scss @@ -87,8 +87,8 @@ @include inline(); } -:host-context(.limited-width > ):not([slot]), -:host-context(.menu > ):not([slot]) { +:host-context(.limited-width > *):not([slot]), +:host-context(.menu > *):not([slot]) { &.core-loading-loaded { --contents-display: flex; flex-direction: column;