A lot more smooth transitions
This commit is contained in:
parent
270e65f008
commit
c366396470
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user