Skip to content
Permalink
Browse files

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

  • Loading branch information...
liamdebeasi committed Oct 2, 2019
1 parent 3c846a7 commit 9f5ed231c32f0daf04c568791df003b11ca8a8e8
@@ -949,8 +949,9 @@ export const createAnimation = () => {
*/
const animationDelay = getDelay() || 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], () => {
clearCSSAnimationsTimeout();
@@ -17,15 +17,16 @@
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 rootAnimation = createAnimation();
rootAnimation
.addElement(squareA)
.duration(1000)
.duration(500)
.iterations(2)
.easing('linear')
.keyframes([
{ background: 'rgba(255, 0, 0, 0.5)', offset: 0 },
@@ -12,7 +12,7 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
import { createAnimation } from '../../../../dist/index.mjs';
import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelectorAll('.square-a');
const squareB = document.querySelectorAll('.square-b');
@@ -17,7 +17,7 @@
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 squareBText = document.querySelectorAll('.square-b .text');
@@ -12,7 +12,7 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
import { createAnimation, createGesture } from '../../../../dist/index.mjs';
import { createAnimation, createGesture } from '../../../../dist/ionic/index.esm.js';
function clamp(val) {
if (val > 1) {
@@ -17,7 +17,7 @@
Element.prototype.animate = null;
}
import { createAnimation } from '../../../../dist/index.mjs';
import { createAnimation } from '../../../../dist/ionic/index.esm.js';
const squareA = document.querySelector('.square-a');
@@ -17,7 +17,7 @@
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 squareB = document.querySelector('.square-b');
@@ -17,7 +17,7 @@
Element.prototype.animate = null;
}
import { createAnimation } from '../../../../dist/index.mjs';
import { createAnimation } from '../../../../dist/ionic/index.esm.js';
createAnimation()
.addElement(document.querySelector('.square-a'))

0 comments on commit 9f5ed23

Please sign in to comment.
You can’t perform that action at this time.