I am using leptos to build a web application. I want to do what is mentioned in this answer:

function shake() {
  var box = document.getElementById("box");
  if (box.style.animationName === "shake")
      box.style.animationName = "shake2";
  else
      box.style.animationName = "shake";
}

I am trying to use NodeRef for this.

My code looks something like this:

#[component]
pub fn MyComponent() -> impl IntoView {
  let error_text_node_ref = NodeRef::<P>::new();
  let (error_text, set_error_text) = signal("".to_string());

  let some_on_click_handler = Callback::new(move |evt: FretClickEvent| {
      if let Some(node) = error_text_node_ref.get() {
        node.style(/* i have to pass a style here*/)
        // how to access node.style.animationName?
        // i want to retrigger the animation on my p element here
      }

      // some other logic for setting error_text..
  });

  view!{
    <p node_ref=error_text_node_ref 
        class="text-center text-red-600 animate-once animate-duration-150 animate-jump-in">
      {error_text}
    </p>
  }
}

The .style() call does not seem to do what i want here. It expects a style as a parameter, but I dont want to set a style, instead I want to access the style and change one property on it.

The style. function is defined in tachys like this:

    fn style<S>(&self, style: S) -> S::State
    where
        S: IntoStyle,
    {
        style.build(self.as_ref())
    }

so I am not even sure if that is the right function.

Any suggestions for steering me in the right direction are much appreciated.