How to Fade content of a div?

I am new to OPA. I can replace the content of the div using DOM.transform but I want to fade that content before replacing with new one.

How do I do it?

Basically, how do I use Dom.Effect? A code snippet will help.

Th开发者_运维问答anks

This snippet may help you:

effect() =
_ = Dom.transition(#content, Dom.Effect.fade_out())
void

main =
  <h1 id=#content onclick={_ -> effect()} >Content</h1>

server = one_page_server("Hello", -> main)

It fade-out the title when clicking on it.

Check https://opalang.org/resources/doc/index.html#dom.opa.html/!/value_stdlib.core.xhtml.Dom.Effect