I am trying to add animation to a particular Div h...

# compose-web

[Rohan Maity]

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

[Oleksandr Karpovich [JB]]

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]

hey, this works actually

[Rohan Maity]

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

[Rohan Maity]

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

[Rohan Maity]

Not sure why is this happening

[hfhbd]

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]

I needed to do unsafeCast to EventTarget after that only it worked for me

I checked your project , but there was no such case

[Rohan Maity]

😕

[Big Chungus]

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

[hfhbd]

Or what is the type of the variable?

[Rohan Maity]

I checked the heirarchy , it was the same @Big Chungus

[Rohan Maity]

Or what is the type of the variable?

HTMLDivElement

[hfhbd]

Strange, it works in different projects without problems for me.

val s: HTMLDivElement
s.addEventListener("asf", callback =  { f ->

})

[Rohan Maity]

Wierd :

[Rohan Maity]

😕

[Rohan Maity]

I checked the heirarchy in Web, EventTarget is implemented by Element which is extended by HTMLDivElement, so for me unsafeCast worked 😐