Files
79a2f023e7 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>
2024-12-02 13:51:27 -08:00

28 lines
359 B
CSS

* {
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);
}