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,