diff --git a/Cargo.toml b/Cargo.toml index 5c484de..22c416b 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -4,7 +4,7 @@ version = "0.0.1" edition = "2021" repository = "https://github.com/brofrain/leptos-animated-for" license = "MIT" -description = "`` component using FLIP transitions for Leptos" +description = "`` component utilizing FLIP position transitions for Leptos" keywords = ["leptos", "animations", "dom", "web", "wasm"] [dependencies] diff --git a/README.md b/README.md index 91a3ac7..8cc702e 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ # `` component for [Leptos](https://leptos.dev/) -> Animation tool for insertions, removals, and order changes of grouped elements and components using [FLIP](https://aerotwist.com/blog/flip-your-animations/) technique. +[FLIP](https://aerotwist.com/blog/flip-your-animations/) animations for element and component groups inspired by Vue's [``](https://vuejs.org/guide/built-ins/transition-group.html).

-This crate exports a component similar to Leptos' built-in `` with additional properties for applying specific CSS classes to nodes that: +This crate exports a component similar to Leptos' built-in [``](https://docs.rs/leptos/latest/leptos/fn.For.html) with additional properties for applying specific CSS classes to nodes that: -- are initially rendered +- are rendered for the first time - represent already removed items @@ -35,7 +35,7 @@ view! { - `enter_class` - appended to entering elements. The class is removed on a [transitionend](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) or [animationend](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) event, or if move transition is triggered before this one ends. -- `move_class` - active class for elements moving to their new positions. The class is removed on a `transitionend` or `animationend` event (same as enter_class). Reordering items again before they reach their destinations will stagger the animation and override the target positions. +- `move_class` - active class for elements moving to their new positions. The class is removed on a `transitionend` or `animationend` event (same as `enter_class`). Reordering items again before they reach their destinations will stagger the animation and overwrite the target positions. - `leave_class` - removed items have their elements present in the DOM with this class applied. The nodes are removed on a `transitionend` or `animationend` event. diff --git a/src/lib.rs b/src/lib.rs index 483017d..894f895 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -91,17 +91,19 @@ where }) } +/// List-rendering component utilizing FLIP position transitions. +/// Read the full guide [here](https://github.com/brofrain/leptos-animated-for). #[allow(clippy::module_name_repetitions)] #[component(transparent)] pub fn AnimatedFor( each: Items, key: KeyFn, children: ChildFn, - #[prop(optional, into)] appear: Option, - #[prop(optional, into)] move_class: MaybeProp, - #[prop(optional, into)] enter_class: MaybeProp, #[prop(optional, into)] enter_from_class: MaybeProp, + #[prop(optional, into)] enter_class: MaybeProp, + #[prop(optional, into)] move_class: MaybeProp, #[prop(optional, into)] leave_class: MaybeProp, + #[prop(optional, into)] appear: Option, ) -> impl IntoView where Items: Fn() -> ItemIter + 'static,