5.0.4

fixes #20602

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [5.0.4](https://github.com/ionic-team/ionic/compare/v5.0.3...v5.0.4) (2020-02-27)
+
+
+### Bug Fixes
+
+* **animation:** reset all temporary flags when interrupting an animation ([#20627](https://github.com/ionic-team/ionic/issues/20627)) ([0e0e401](https://github.com/ionic-team/ionic/commit/0e0e401d86dabaa1dc804656e4d384154d6fdd05)), closes [#20602](https://github.com/ionic-team/ionic/issues/20602)
+* **buttons:** use proper button colors based on CSS variables when inside of a toolbar ([#20633](https://github.com/ionic-team/ionic/issues/20633)) ([c1d7bf2](https://github.com/ionic-team/ionic/commit/c1d7bf229d10d0a12f90b6d2730d6d8ac78b48cd))
+
+
+
 ## [5.0.3](https://github.com/ionic-team/ionic/compare/v5.0.2...v5.0.3) (2020-02-26)
 
 

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.0.3",
+    "@ionic/core": "5.0.4",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

core/README.md

@@ -23,9 +23,9 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/dist/ionic/ionic.esm.js"></script>
-<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/dist/ionic/ionic.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/css/ionic.bundle.css" rel="stylesheet">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">
 ```
 
 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -34,7 +34,7 @@
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.8.3",
+    "@stencil/core": "1.8.11",
     "@stencil/sass": "1.0.1",
     "@types/jest": "24.0.21",
     "@types/node": "12.12.3",

core/src/components/back-button/back-button.scss

@@ -239,6 +239,6 @@ ion-icon {
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host(.in-toolbar) {
+:host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
 }

core/src/components/back-button/back-button.tsx

@@ -114,6 +114,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'back-button-disabled': disabled,
           'back-button-has-icon-only': hasIconOnly,
           'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'ion-activatable': true,
           'ion-focusable': true,
           'show-back-button': showBackButton

core/src/components/button/button.ios.scss

@@ -175,4 +175,12 @@
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: #{current-color(tint)};
   }
+
+  // Solid buttons inside of a toolbar should use a tint of the current
+  // background so use white to tint it
+  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
+    background: #fff;
+
+    opacity: 0.10;
+  }
 }

core/src/components/button/button.scss

@@ -305,3 +305,19 @@ ion-ripple-effect {
   background: transparent;
   color: current-color(base);
 }
+
+// Button in Toolbar
+// --------------------------------------------------
+
+:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  color: #{var(--ion-toolbar-color, var(--color))};
+}
+
+:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  border-color: #{var(--ion-toolbar-color, var(--color, var(--border-color)))};
+}
+
+:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: #{var(--ion-toolbar-color, var(--background))};
+  color: #{var(--ion-toolbar-background, var(--color))};
+}

core/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
 import { Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { hasShadowDom } from '../../utils/helpers';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -208,7 +208,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-${shape}`]: shape !== undefined,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
-
+          'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'button-has-icon-only': hasIconOnly,
           'button-disabled': disabled,
           'ion-activatable': true,

core/src/components/buttons/buttons.ios.scss

@@ -17,12 +17,11 @@
   font-weight: 400;
 }
 
-
-
 ::slotted(*) ion-button:not(.button-round) {
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
 
+
 // iOS Toolbar with Color: Default Buttons
 // --------------------------------------------------
 
@@ -38,6 +37,8 @@
   --background-focused-opacity: .12;
   --background-activated: #000;
   --background-activated-opacity: .12;
+  --background-hover: #{current-color(base)};
+  --background-hover-opacity: 0.45;
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
 }
@@ -53,38 +54,21 @@
 }
 
 
-// iOS Toolbar Button Clear
+// iOS Toolbar Button Clear / Outline
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
-  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-}
-
-
-// iOS Toolbar Button Outline
-// --------------------------------------------------
-
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
-  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
-  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+::slotted(*) .button-clear,
+::slotted(*) .button-outline {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: transparent;
 }
 
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
-  --color: #{$toolbar-ios-background};
-  --color-activated: #{$toolbar-ios-background};
-  --color-focused: #{$toolbar-ios-background};
-  --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
-  --background-hover-opacity: 0.1;
+::slotted(*) .button-solid:not(.ion-color) {
   --background-focused: #000;
   --background-focused-opacity: .12;
   --background-activated: #000;
@@ -121,25 +105,3 @@
 
   line-height: .67;
 }
-
-
-// iOS Toolbar Menu Toggle
-// --------------------------------------------------
-
-// .button-menutoggle-ios {
-//   order: map-get($toolbar-order-ios, menu-toggle-start);
-
-//   min-width: 36px;
-
-//   --padding-top: 0;
-//   --padding-bottom: 0;
-//   --padding-start: 0;
-//   --padding-end: 0;
-
-//   ion-icon {
-//     @include padding(0, 6px);
-
-//     font-size: 28px;
-//   }
-// }
-

core/src/components/buttons/buttons.md.scss

@@ -77,7 +77,6 @@
 
 ::slotted(*) .button-solid {
   --color: #{$toolbar-md-background};
-  --color-activated: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
   --background-activated: transparent;
   --background-focused: currentColor;
@@ -89,13 +88,11 @@
 
 ::slotted(*) .button-outline {
   --color: initial;
-  --color-activated: currentColor;
-  --color-focused: #{$toolbar-md-color};
   --background: transparent;
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
-  --border-color: #{$toolbar-md-color};
+  --border-color: currentColor;
 }
 
 
@@ -104,8 +101,6 @@
 
 ::slotted(*) .button-clear {
   --color: initial;
-  --color-focused: #{$toolbar-md-color};
-  --color-activated: currentColor;
   --background: transparent;
   --background-activated: transparent;
   --background-focused: currentColor;

core/src/components/menu-button/menu-button.scss

@@ -158,6 +158,6 @@ ion-icon {
 // Menu Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host(.in-toolbar) {
+:host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
-}
+}

core/src/components/menu-button/menu-button.tsx

@@ -86,6 +86,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           'menu-button-hidden': hidden,
           'menu-button-disabled': disabled,
           'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'ion-activatable': true,
           'ion-focusable': true
         }}

core/src/components/toolbar/test/custom/e2e.ts

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toolbar: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/custom?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('toolbar:rtl: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/custom?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/toolbar/test/custom/index.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar - Custom</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content id="content">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary" class="themed-colors component-colors">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color: Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary" class="themed-colors component-colors">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color: Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="start">
+          <ion-back-button color="danger" default-href="/" text=""></ion-back-button>
+          <ion-menu-button color="danger" auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed w / Color Buttons</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="secondary">
+          <ion-button color="danger" fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger" fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="danger" fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed w / Color Buttons</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="start">
+          <ion-back-button color="secondary" default-href="/" text=""></ion-back-button>
+          <ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars w/ Color Buttons</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="secondary">
+          <ion-button color="secondary" fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary" fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="secondary" fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars w/ Color Buttons</ion-title>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+
+  <style>
+    .themed-colors {
+      --ion-toolbar-background: #d9fae0;
+      --ion-toolbar-color: #b68928;
+    }
+
+    .component-colors {
+      --background: #fff4f5;
+    }
+
+    .component-colors,
+    .component-colors ion-back-button,
+    .component-colors ion-menu-button,
+    .component-colors ion-button {
+      --color: #aa3723;
+    }
+
+    .component-colors ion-button[fill="solid"] {
+      --background: #aa3723;
+      --color: #fff;
+    }
+
+  </style>
+</body>
+
+</html>

core/src/utils/animation/animation.ts

@@ -102,6 +102,18 @@ export const createAnimation = (animationId?: string): Animation => {
     cleanUpStyleSheets();
   };
 
+  const resetFlags = () => {
+    shouldForceLinearEasing = false;
+    shouldForceSyncPlayback = false;
+    shouldCalculateNumAnimations = true;
+    forceDirectionValue = undefined;
+    forceDurationValue = undefined;
+    forceDelayValue = undefined;
+    numAnimationsRunning = 0;
+    finished = false;
+    willComplete = true;
+  };
+
   const onFinish = (callback: AnimationLifecycle, opts?: AnimationCallbackOptions) => {
     const callbacks = (opts && opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
@@ -886,6 +898,8 @@ export const createAnimation = (animationId?: string): Animation => {
       cleanUpElements();
       initialized = false;
     }
+
+    resetFlags();
   };
 
   const from = (property: string, value: any) => {

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "@angular/core": "8.2.13",
     "@angular/platform-browser": "8.2.13",
     "@angular/platform-server": "8.2.13",
-    "@ionic/core": "5.0.3",
+    "@ionic/core": "5.0.4",
     "ng-packagr": "5.7.1",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -39,16 +39,16 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "@ionic/core": "5.0.3",
-    "@ionic/react": "5.0.3",
+    "@ionic/core": "5.0.4",
+    "@ionic/react": "5.0.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
-    "@ionic/core": "5.0.3",
-    "@ionic/react": "5.0.3",
+    "@ionic/core": "5.0.4",
+    "@ionic/react": "5.0.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "5.0.3",
+    "@ionic/core": "5.0.4",
     "ionicons": "^5.0.0",
     "tslib": "*"
   },