all files / lib/src/instance/functions/ animate.js

3.33% Statements 2/60
0% Branches 0/48
0% Functions 0/4
3.33% Lines 2/60
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                                                                                                                                                                                                                         
import { isElementVisible } from '../../utils/core'
import clean from '../methods/clean'
 
 
export default function animate (element) {
	var this$1 = this;
 
 
	var isDelayed = element.config.useDelay === 'always'
		|| element.config.useDelay === 'onload' && this.pristine
		|| element.config.useDelay === 'once' && !element.seen
 
	var sequence = (element.sequence) ? this.store.sequences[element.sequence.id] : null
	var styles = [element.styles.inline]
 
	if (isElementVisible.call(this, element) && !element.visible) {
 
		if (sequence !== null) {
			if (sequence.head.index === null && sequence.tail.index === null) {
				sequence.head.index = sequence.tail.index = element.sequence.index
				sequence.head.blocked = sequence.tail.blocked = true
 
			} else if (sequence.head.index - 1 === element.sequence.index && !sequence.head.blocked) {
				sequence.head.index--
				sequence.head.blocked = true
 
			} else if (sequence.tail.index + 1 === element.sequence.index && !sequence.tail.blocked) {
				sequence.tail.index++
				sequence.tail.blocked = true
 
			} else { return }
 
			window.setTimeout(function () {
				sequence.head.blocked = sequence.tail.blocked = false
				this$1.delegate()
			}, sequence.interval)
		}
 
		styles.push(element.styles.opacity.computed)
		styles.push(element.styles.transform.generated.final)
 
		if (isDelayed) {
			styles.push(element.styles.transition.generated.delayed)
		} else {
			styles.push(element.styles.transition.generated.instant)
		}
 
		element.seen = true
		element.visible = true
		registerCallbacks.call(this, element, isDelayed)
		element.node.setAttribute('style', styles.join(' '))
 
	} else {
		if (!isElementVisible.call(this, element) && element.visible && element.config.reset) {
 
			if (sequence) {
				if (sequence.head.index === element.sequence.index) {
					sequence.head.index++
				} else if (sequence.tail.index === element.sequence.index) {
					sequence.tail.index--
				} else { return }
			}
 
			styles.push(element.styles.opacity.generated)
			styles.push(element.styles.transform.generated.initial)
			styles.push(element.styles.transition.generated.instant)
 
			element.visible = false
			registerCallbacks.call(this, element)
			element.node.setAttribute('style', styles.join(' '))
		}
	}
}
 
 
function registerCallbacks (element, isDelayed) {
	var this$1 = this;
 
 
	var duration = (isDelayed)
		? element.config.duration + element.config.delay
		: element.config.duration
 
	var afterCallback
	if (element.visible) {
		element.config.beforeReveal(element.node)
		afterCallback = element.config.afterReveal
	} else {
		element.config.beforeReset(element.node)
		afterCallback = element.config.afterReset
	}
 
	var elapsed = 0
	if (element.callbackTimer) {
		elapsed = Date.now() - element.callbackTimer.start
		window.clearTimeout(element.callbackTimer.clock)
	}
 
	element.callbackTimer = {
		start: Date.now(),
		clock: window.setTimeout(function () {
			afterCallback(element.node)
			element.callbackTimer = null
			if (element.visible && !element.config.reset) {
				clean.call(this$1, element.node)
			}
		}, duration - elapsed),
	}
}