() { this.elements = [] const requestAnimation = function () { for (let i = 0; i<this.elements.length; i++) { let item = this.elements[i] let action = item.getAttribute('animate-show') ? 'show' : 'hide' if (action == 'show') changeClass(item, 'remove', 'hide') changeClass(item, 'add', action == 'show' ? 'hide-leave' : 'hide-add') setTimeout(() => { changeClass(item, 'add', action == 'show' ? 'hide-leave-active' : 'hide-add-active') }, 0) let onAnimationEnd = function () { changeClass(item, 'remove', action == 'show' ? 'hide-leave-active' : 'hide-add-active') changeClass(item, 'remove', action == 'show' ? 'hide-leave' : 'hide-add') if (action == 'hide') changeClass(item, 'add', 'hide') item.removeEventListener('animationend', onAnimationEnd, false) item.removeEventListener('transitionend', onAnimationEnd, false) } item.addEventListener('animationend', onAnimationEnd, false) item.addEventListener('transitionend', onAnimationEnd, false) } }.bind(this) this.on('mount', function () { this.elements = this.root.querySelectorAll('[animate]') }) this.on('update', function () { for (var i = 0; i<this.elements.length; i++) { let item = this.elements[i] let value = item.getAttribute('animate-show') this.previous || (this.previous = {}) if (this.previous[i] === undefined) this.previous[i] = value if (this.previous[i] != value) { this.previous[i] = value window.requestAnimationFrame(requestAnimation) } } }) } export default { init, }