animore icon indicating copy to clipboard operation
animore copied to clipboard

Modified / Unmount works not as expected

Open HerrHase opened this issue 5 years ago • 0 comments

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>

HerrHase avatar Sep 07 '20 08:09 HerrHase