Add the onvisible event handler to Element (#2911)

* Add the `onvisible` event using the IntersectionObserver

* Add a visible example

This example is based on https://codepen.io/ryanfinni/pen/VwZeGxN

* Remove web-sys CustomEvent feature for html package

* update js bindings and hash

* Use dioxus doc instead of lorem ipsum

* Fix clippy warning

* Add get_target method to the event data

* Make `get_time` return an Instant instead of a f64

* fix merge conflicts, compilinga

* remove target

* small nits

* serialzie as time_ms

* fix timing, works on desktop

* remove latent nits, fix hash

* box size clippy

* fix browserlist cargo.lock

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>

examples/assets/visible.css

@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  height: 500px;
+  width: 500px;
+  margin: 100px auto;
+}
+
+p {
+  line-height: 30px;
+
+}
+
+.animated-text {
+  font-size: 30px;
+  text-align: center;
+  opacity: 0;
+  transform: translateY(100px);
+  transition: opacity 1s ease, transform 1s ease;
+}
+
+.animated-text.visible {
+  opacity: 1;
+  transform: translateX(0);
+}

examples/clock.rs

@@ -1,5 +1,4 @@
 //! A simple little clock that updates the time every few milliseconds.
-//!
 
 use async_std::task::sleep;
 use dioxus::prelude::*;

examples/visible.rs

@@ -0,0 +1,86 @@
+//! Port of the https://codepen.io/ryanfinni/pen/VwZeGxN example
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    let mut animated_classes = use_signal(|| ["animated-text", ""]);
+
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./examples/assets/visible.css") }
+
+        div {
+            class: "container",
+
+            p {
+                "Scroll to the bottom of the page. The text will transition in when it becomes visible in the viewport."
+            }
+
+            p {
+                "First, let's create a new project for our hacker news app. We can use the CLI to create a new
+                project. You can select a platform of your choice or view the getting started guide for more information
+                on each option. If you aren't sure what platform to try out, we recommend getting started with web or
+                desktop:"
+            }
+
+            p {
+                "The template contains some boilerplate to help you get started. For this guide, we will be rebuilding some of the code
+                from scratch for learning purposes. You can clear the src/main.rs file. We will be adding new code in the next
+                sections."
+            }
+
+            p {
+                "Next, let's setup our dependencies. We need to set up a few dependencies to work with the hacker news API: "
+            }
+
+            p {
+                "First, let's create a new project for our hacker news app. We can use the CLI to create a new
+                project. You can select a platform of your choice or view the getting started guide for more information
+                on each option. If you aren't sure what platform to try out, we recommend getting started with web or
+                desktop:"
+            }
+
+            p {
+                "The template contains some boilerplate to help you get started. For this guide, we will be rebuilding some of the code
+                from scratch for learning purposes. You can clear the src/main.rs file. We will be adding new code in the next
+                sections."
+            }
+
+            p {
+                "Next, let's setup our dependencies. We need to set up a few dependencies to work with the hacker news API: "
+            }
+
+            p {
+                "First, let's create a new project for our hacker news app. We can use the CLI to create a new
+                project. You can select a platform of your choice or view the getting started guide for more information
+                on each option. If you aren't sure what platform to try out, we recommend getting started with web or
+                desktop:"
+            }
+
+            p {
+                "The template contains some boilerplate to help you get started. For this guide, we will be rebuilding some of the code
+                from scratch for learning purposes. You can clear the src/main.rs file. We will be adding new code in the next
+                sections."
+            }
+
+            p {
+                "Next, let's setup our dependencies. We need to set up a few dependencies to work with the hacker news API: "
+            }
+
+            h2 {
+                class: animated_classes().join(" "),
+                onvisible: move |evt| {
+                    let data = evt.data();
+                    if let Ok(is_intersecting) = data.is_intersecting() {
+                        animated_classes.write()[1] = if is_intersecting { "visible" } else { "" };
+                    }
+                },
+
+                "Animated Text"
+            }
+        }
+    }
+}