javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix treeshaking, remove old comments

Browse Source
This commit is contained in:
Liam DeBeasi
2019-07-30 10:21:30 -04:00
parent 5a71831450
commit 245c9b78f3
4 changed files with 11 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,11 +3,6 @@ import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyfra
let counter = 0;
/**
* HACKY
*/
const _forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
export const createAnimation = () => {
const elements: HTMLElement[] = [];
const childAnimations: Animation[] = [];
@@ -17,7 +12,7 @@ export const createAnimation = () => {
const _afterAddWriteFunctions: any[] = [];
const webAnimations: any[] = [];
const onFinishCallbacks: any[] = [];
const supportsWebAnimations = !!(window as any).Animation && _forceCSSAnimations === null;
const supportsWebAnimations = !!(window as any).Animation;
const _name = `ion-animation-${counter++}`;
let _delay: number | undefined;
let _duration: number | undefined;

149
core/src/utils/animation/test/animation.spec.ts
View File

@@ -82,155 +82,6 @@ describe('Animation Class', () => {
});
});
/*
describe('Before and After Animation Methods', () => {
let animation;
beforeEach(() => {
animation = createAnimation();
});
it.only('should register all "before" styles', () => {
animation.beforeStyles({ 'background': 'red', 'opacity': 1 });
console.log(animation)
expect(Object.keys(animation.beforeStylesValue).length).toEqual(2);
});
it('should register all "before" classes given arrays', () => {
const classesToAdd = ['my-class', 'hello-world'];
const classesToRemove = ['ionic-framework'];
animation = animation.beforeAddClass(classesToAdd);
animation = animation.beforeRemoveClass(classesToRemove);
expect(animation.beforeAddClasses.length).toEqual(classesToAdd.length);
expect(animation.beforeRemoveClasses.length).toEqual(classesToRemove.length);
});
it('should register all "before" classes given strings', () => {
const classesToAdd = 'my-class';
const classesToRemove = 'ionic-framework';
animation = animation.beforeAddClass(classesToAdd);
animation = animation.beforeRemoveClass(classesToRemove);
expect(animation.beforeAddClasses.length).toEqual(1);
expect(animation.beforeRemoveClasses.length).toEqual(1);
});
it('should not register "before" classes given undefined', () => {
animation = animation.beforeAddClass(undefined);
animation = animation.beforeRemoveClass(undefined);
expect(animation.beforeAddClasses.length).toEqual(0);
expect(animation.beforeRemoveClasses.length).toEqual(0);
});
it('should apply all "before" styles', () => {
const el = document.createElement('div');
el.classList.add('hello', 'world');
el.style.setProperty('opacity', "0.5");
animation
.addElement(el)
.beforeAddClass(['ionic', 'framework'])
.beforeStyles({ 'background': 'blue' })
.beforeClearStyles(['opacity'])
.beforeRemoveClass('hello');
expect(el.style.getPropertyValue('opacity')).toEqual("0.5");
expect(el.classList.contains('hello')).toEqual(true);
expect(el.classList.contains('world')).toEqual(true);
animation.play();
expect(el.style.getPropertyValue('opacity')).toEqual("");
expect(el.style.getPropertyValue('background')).toEqual('blue');
expect(el.classList.contains('hello')).toEqual(false);
expect(el.classList.contains('world')).toEqual(true);
expect(el.classList.contains('ionic')).toEqual(true);
expect(el.classList.contains('framework')).toEqual(true);
});
it('should register all "after" styles', () => {
animation = animation.afterStyles({ 'background': 'red', 'opacity': 1 });
expect(Object.keys(animation.afterStylesValue).length).toEqual(2);
});
it('should register all "after" classes given arrays', () => {
const classesToAdd = ['my-class', 'hello-world'];
const classesToRemove = ['ionic-framework'];
animation = animation.afterAddClass(classesToAdd);
animation = animation.afterRemoveClass(classesToRemove);
expect(animation.afterAddClasses.length).toEqual(classesToAdd.length);
expect(animation.afterRemoveClasses.length).toEqual(classesToRemove.length);
});
it('should register all "after" classes given strings', () => {
const classesToAdd = 'my-class';
const classesToRemove = 'ionic-framework';
animation = animation.afterAddClass(classesToAdd);
animation = animation.afterRemoveClass(classesToRemove);
expect(animation.afterAddClasses.length).toEqual(1);
expect(animation.afterRemoveClasses.length).toEqual(1);
});
it('should not register "after" classes given undefined', () => {
animation = animation.afterAddClass(undefined);
animation = animation.afterRemoveClass(undefined);
expect(animation.afterAddClasses.length).toEqual(0);
expect(animation.afterRemoveClasses.length).toEqual(0);
});
it('should apply all "after" styles', async () => {
const el = document.createElement('div');
el.classList.add('hello', 'world');
el.style.setProperty('opacity', "0.5");
animation
.name('my-animation')
.addElement(el)
.duration(500)
.keyframes([
{ transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
{ transform: 'scale(0.5) rotate(-45deg)', opacity: 0.5, offset: 0.5 },
{ transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
])
.afterAddClass(['ionic', 'framework'])
.afterStyles({ 'background': 'blue' })
.afterClearStyles(['opacity'])
.afterRemoveClass('hello');
expect(el.style.getPropertyValue('opacity')).toEqual("0.5");
expect(el.classList.contains('hello')).toEqual(true);
expect(el.classList.contains('world')).toEqual(true);
animation.play();
/**
* Animations don't run in spec tests
* so we have to fake the end of the animation
*/
/* const ev = new CustomEvent('animationend');
el.dispatchEvent(ev);
expect(el.style.getPropertyValue('opacity')).toEqual("");
expect(el.style.getPropertyValue('background')).toEqual('blue');
expect(el.classList.contains('hello')).toEqual(false);
expect(el.classList.contains('world')).toEqual(true);
expect(el.classList.contains('ionic')).toEqual(true);
expect(el.classList.contains('framework')).toEqual(true);
});
});
*/
describe('Animation Config Methods', () => {
let animation;
beforeEach(() => {

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

@@ -12,6 +12,11 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
if (forceCSSAnimations) {
window.Animation = null;
}
import { createAnimation } from '../../../../dist/index.mjs';
const squareA = document.querySelector('.square-a');

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

@@ -12,6 +12,11 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
if (forceCSSAnimations) {
window.Animation = null;
}
import { createAnimation } from '../../../../dist/index.mjs';
const squareA = document.querySelector('.square-a');