A lot more smooth transitions

This commit is contained in:
Eduard Urbach 2018-03-14 04:28:31 +01:00
parent 270e65f008
commit c366396470

View File

@ -1,3 +1,5 @@
const timeCapacity = 6.5
export class MutationQueue { export class MutationQueue {
elements: Array<HTMLElement> elements: Array<HTMLElement>
mutation: (elem: HTMLElement) => void mutation: (elem: HTMLElement) => void
@ -16,7 +18,16 @@ export class MutationQueue {
} }
mutateAll() { mutateAll() {
let start = performance.now()
for(let i = 0; i < this.elements.length; i++) { for(let i = 0; i < this.elements.length; i++) {
if(performance.now() - start > timeCapacity) {
let end = performance.now()
this.elements = this.elements.slice(i)
window.requestAnimationFrame(() => this.mutateAll())
return
}
this.mutation(this.elements[i]) this.mutation(this.elements[i])
} }
@ -31,7 +42,6 @@ export class MutationQueue {
export class CustomMutationQueue { export class CustomMutationQueue {
mutations: Array<() => void> mutations: Array<() => void>
onClearCallBack: () => void onClearCallBack: () => void
timeCapacity = 6.5
constructor() { constructor() {
this.mutations = [] this.mutations = []
@ -49,9 +59,8 @@ export class CustomMutationQueue {
let start = performance.now() let start = performance.now()
for(let i = 0; i < this.mutations.length; i++) { for(let i = 0; i < this.mutations.length; i++) {
if(performance.now() - start > this.timeCapacity) { if(performance.now() - start > timeCapacity) {
let end = performance.now() let end = performance.now()
// console.log(i, "mutations in", performance.now() - start, "ms")
this.mutations = this.mutations.slice(i) this.mutations = this.mutations.slice(i)
window.requestAnimationFrame(() => this.mutateAll()) window.requestAnimationFrame(() => this.mutateAll())
return return