Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modified / Unmount works not as expected #5

Open
HerrHase opened this issue Sep 7, 2020 · 0 comments
Open

Modified / Unmount works not as expected #5

HerrHase opened this issue Sep 7, 2020 · 0 comments

Comments

@HerrHase
Copy link

HerrHase commented Sep 7, 2020

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 HerrHase changed the title Modified / Unmount is ignored Modified / Unmount works not as expected Sep 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant