Function leptos::AnimatedShow

pub fn AnimatedShow(props: AnimatedShowProps) -> impl IntoView

A component that will show its children when the when condition is true. Additionally, you need to specify a hide_delay. If the when condition changes to false, the unmounting of the children will be delayed by the specified Duration. If you provide the optional show_class and hide_class, you can create very easy mount / unmount animations.

let show = create_rw_signal(false);

view! {
    <div
        class="hover-me"
        on:mouseenter=move |_| show.set(true)
        on:mouseleave=move |_| show.set(false)
    >
        "Hover Me"
    </div>

    <AnimatedShow
       when=show
       show_class="fade-in-1000"
       hide_class="fade-out-1000"
       hide_delay=Duration::from_millis(1000)
    >
       <div class="here-i-am">
           "Here I Am!"
       </div>
    </AnimatedShow>
}

Required Props

• children: ChildrenFn
  • The components Show wraps
• when: impl Into<MaybeSignal<bool>>
  • If the component should show or not
• hide_delay: Duration
  • The timeout after which the component will be unmounted if when == false

Optional Props

• show_class: [&'static str]
  • Optional CSS class to apply if when == true
• hide_class: [&'static str]
  • Optional CSS class to apply if when == false