Add animation when an item is added to the list

gui/src/lib.rs

@@ -93,6 +93,7 @@ fn update_slint_list(new_list: Vec<Item>, list: &VecModel<ui::SItem>) {
             name: item.name.to_shared_string(),
             checked: item.data.checked,
             amount: item.data.amount as i32,
+            just_added: false,
         })
         .for_each(|item| list.push(item));
 }
@@ -196,6 +197,7 @@ pub fn run() -> Result<(), anyhow::Error> {
             checked: false,
             name: item.clone(),
             amount: 1,
+            just_added: true,
         });
         let conf = conf.clone();
         io.spawn(async move || {

gui/ui/app.slint

@@ -113,6 +113,23 @@ component PlusMinus inherits HorizontalLayout {
 
 component GoodListItemAdd inherits Rectangle {
     in-out property <SItem> item;
+    // Animate when this item appears.
+    transform-scale: item.just-added ? 90% : 100%;
+    opacity: item.just-added ? 0 : 100%;
+    init => {
+        self.transform-scale = 100%;
+        self.opacity = 100%;
+        item.just-added = false;
+    }
+    animate transform-scale {
+        duration: 500ms;
+        easing: ease-out-bounce;
+    }
+    animate opacity {
+        duration: 300ms;
+        easing: ease-out;
+    }
+
     background: Palette.alternate-background;
     border-radius: 8pt;
     border-width: 10pt;
@@ -169,7 +186,7 @@ component GoodsListAdd {
 
         for item in items: VerticalLayout {
             GoodListItemAdd {
-                item: item;
+                item <=> item;
             }
 
             Rectangle {

gui/ui/state.slint

@@ -2,6 +2,10 @@ export struct SItem {
     name: string,
     checked: bool,
     amount: int,
+
+    /// Whether the item was just added by the user.
+    /// Determines whether the add-animation plays.
+    just_added: bool,
 }
 
 export struct SButtonItem{