Thread
#compose-web
    Rohan Maity

    Rohan Maity

    8 months ago
    I am trying to add animation to a particular Div here by using StyleSheet Keyframes
    object ModalStyle: StyleSheet() {
        val btsModal by style {
            keyframes {
                from { this.property("top",0.px) }
                to { this.property("top", 30.px) }
            }
        }
    }
    I added this to my div's style like below, but its not animating
    Div(
            attrs = {
                classes("modal")
                id(id)
                tabIndex(-1)
                attr("aria-labelledby", label)
                style {
                    display(displayState.value)
    //                background("#0000004d")
                    position(Position.Relative)
                    animation(ModalStyle.btsModal) {
                        duration(10.s)
                    }
                }
            }
        )
    But no animation happens
    o

    Oleksandr Karpovich [JB]

    8 months ago
    object ModalStyle: StyleSheet() {
        val animTransition by keyframes {
            from { this.property("top",0.px) }
            to { this.property("top", 30.px) }
        }
        val btsModal by style {
    
        }
    }
    then in Div
    Div(
            attrs = {
                classes("modal")
                id(id)
                tabIndex(-1)
                attr("aria-labelledby", label)
                style {
                    display(displayState.value)
    //                background("#0000004d")
                    position(Position.Relative)
                    animation(ModalStyle.animTransition) {
                        duration(10.s)
                    }
                }
            }
        )
    also somewhere at the root you might need to call a composable:
    // somewhere like:
    renderComposable("root") {
       Style(ModalStyle)
    }
    Rohan Maity

    Rohan Maity

    8 months ago
    hey, this works actually
    I knew I needed to use KeyFrames, but not sure, how in compose web Are all the CSS things need to be applied by
    by delegate
    hello @hfhbd I was going through your bootstrap-compose somehow I a, having problem with this particular line
    hrmlDivElement.addEventListener()
    is not available in my project But when I saw in your project, IDE is able to resolve it
    Not sure why is this happening
    hfhbd

    hfhbd

    7 months ago
    addEventListener
    is a generated function of
    EventTarget
    , defined in the Kotlin JS web api:
    org.w3c.dom.events
    . Sounds like a missing import
    Rohan Maity

    Rohan Maity

    7 months ago
    I needed to do
    unsafeCast
    to
    EventTarget
    after that only it worked for me I checked your project , but there was no such case
    😕
    Big Chungus

    Big Chungus

    7 months ago
    I suspect you have the wrong HTMLDivElement import. Try removing the type from lambda and let the compiler infer it instead
    hfhbd

    hfhbd

    7 months ago
    Or what is the type of the variable?
    Rohan Maity

    Rohan Maity

    7 months ago
    I checked the heirarchy , it was the same @Big Chungus
    Or what is the type of the variable?
    HTMLDivElement
    hfhbd

    hfhbd

    7 months ago
    Strange, it works in different projects without problems for me.
    val s: HTMLDivElement
    s.addEventListener("asf", callback =  { f ->
    
    })
    Rohan Maity

    Rohan Maity

    7 months ago
    Wierd :
    😕
    I checked the heirarchy in Web, EventTarget is implemented by Element which is extended by HTMLDivElement, so for me
    unsafeCast
    worked 😐