animore
animore copied to clipboard
Modified / Unmount works not as expected
I have played around and reduce the version in https://github.com/riot/animore/tree/dev, to only handle css-classes, but i have a problem with the function "unmount". Mount and animation works, but unmount seems to run, but is not waiting for unmountSlot().
<span is="transition" if={ state.show === true }>
1
</span>
<transition>
<script>
import {pure, __} from 'riot'
const { template, bindingTypes } = __.DOMBindings
export default pure(({ slots }) => {
return {
mount(element, context) {
this.element = element
this.element.addEventListener('transitionend', () => {
this.element.classList.remove('transition-enter')
})
this.element.addEventListener('transitioncancel', () => {
this.element.classList.remove('transition-enter')
})
this.element.classList.add('transition-enter')
setTimeout(() => {
this.element.classList.add('transition-active-enter')
}, 10)
this.createSlot(this.element, context)
},
createSlot(element, context) {
if (!slots || !slots.length) return
this.slot = template('<slot></slot>', [{
type: bindingTypes.SLOT,
selector: 'slot',
name: 'default'
}])
this.slot.mount(element, {
slots
}, context)
},
update(context) {
if (this.slot) {
this.slot.update({}, context)
}
},
unmount(context, ...rest) {
const parentNode = this.element.parentNode
const unmountSlot = () => this.slot ? this.slot.unmount(context, ...rest) : null
this.element.addEventListener('transitionend', () => {
unmountSlot()
})
this.element.classList.add('transition-leave')
setTimeout(() => {
this.element.classList.add('transition-active-leave')
}, 10)
}
}
})
</script>
</transition>