javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(animation): animation timer fallback now accounts for iterations (#19527)

Browse Source
This commit is contained in:
Liam DeBeasi
2019-10-02 10:41:29 -04:00
committed by GitHub
parent 3c846a7b06
commit 9f5ed231c3
8 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/utils/animation/animation.ts
View File

@ -949,8 +949,9 @@ export const createAnimation = () => {
*/ */
const animationDelay = getDelay() || 0; const animationDelay = getDelay() || 0;
const animationDuration = getDuration() || 0; const animationDuration = getDuration() || 0;
const animationIterations = getIterations() || 1;
cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration + ANIMATION_END_FALLBACK_PADDING_MS); cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + (animationDuration * animationIterations) + ANIMATION_END_FALLBACK_PADDING_MS);
animationEnd(elements[0], () => { animationEnd(elements[0], () => {
clearCSSAnimationsTimeout(); clearCSSAnimationsTimeout();

5
core/src/utils/animation/test/basic/index.html
View File

@ -17,7 +17,7 @@
Element.prototype.animate = null; Element.prototype.animate = null;
} }
import { createAnimation } from '../../../../dist/index.mjs'; import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelector('.square-a'); const squareA = document.querySelector('.square-a');
@ -25,7 +25,8 @@
rootAnimation rootAnimation
.addElement(squareA) .addElement(squareA)
.duration(1000) .duration(500)
.iterations(2)
.easing('linear') .easing('linear')
.keyframes([ .keyframes([
{ background: 'rgba(255, 0, 0, 0.5)', offset: 0 }, { background: 'rgba(255, 0, 0, 0.5)', offset: 0 },

2
core/src/utils/animation/test/chaining/index.html
View File

@ -12,7 +12,7 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module"> <script type="module">
import { createAnimation } from '../../../../dist/index.mjs'; import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelectorAll('.square-a'); const squareA = document.querySelectorAll('.square-a');
const squareB = document.querySelectorAll('.square-b'); const squareB = document.querySelectorAll('.square-b');

2
core/src/utils/animation/test/display/index.html
View File

@ -17,7 +17,7 @@
Element.prototype.animate = null; Element.prototype.animate = null;
} }
import { createAnimation } from '../../../../dist/index.mjs'; import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelector('.square-a'); const squareA = document.querySelector('.square-a');
const squareBText = document.querySelectorAll('.square-b .text'); const squareBText = document.querySelectorAll('.square-b .text');

2
core/src/utils/animation/test/gesture/index.html
View File

@ -12,7 +12,7 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module"> <script type="module">
import { createAnimation, createGesture } from '../../../../dist/index.mjs'; import { createAnimation, createGesture } from '../../../../dist/ionic/index.esm.js';
function clamp(val) { function clamp(val) {
if (val > 1) { if (val > 1) {

2
core/src/utils/animation/test/hooks/index.html
View File

@ -17,7 +17,7 @@
Element.prototype.animate = null; Element.prototype.animate = null;
} }
import { createAnimation } from '../../../../dist/index.mjs'; import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelector('.square-a'); const squareA = document.querySelector('.square-a');

2
core/src/utils/animation/test/multiple/index.html
View File

@ -17,7 +17,7 @@
Element.prototype.animate = null; Element.prototype.animate = null;
} }
import { createAnimation } from '../../../../dist/index.mjs'; import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelector('.square-a'); const squareA = document.querySelector('.square-a');
const squareB = document.querySelector('.square-b'); const squareB = document.querySelector('.square-b');

2
core/src/utils/animation/test/reuse/index.html
View File

@ -17,7 +17,7 @@
Element.prototype.animate = null; Element.prototype.animate = null;
} }
import { createAnimation } from '../../../../dist/index.mjs'; import { createAnimation } from '../../../../dist/ionic/index.esm.js';
createAnimation() createAnimation()
.addElement(document.querySelector('.square-a')) .addElement(document.querySelector('.square-a'))