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,31 +113,50 @@ component PlusMinus inherits HorizontalLayout {
 
 component GoodListItemAdd inherits Rectangle {
     in-out property <SItem> item;
-    background: Palette.alternate-background;
-    border-radius: 8pt;
-    border-width: 10pt;
-    HorizontalLayout {
-        spacing: 8px;
-        padding: 8px;
-        alignment: start;
-        PlusMinus {
-            item: item;
+    Rectangle {
+        // 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;
         }
 
-        Rectangle {
-            height: 30px;
-            Text {
-                text: root.item.amount;
-                font-size: 12pt;
+        background: Palette.alternate-background;
+        border-radius: 8pt;
+        border-width: 10pt;
+        HorizontalLayout {
+            spacing: 8px;
+            padding: 8px;
+            alignment: start;
+            PlusMinus {
+                item: item;
             }
-        }
 
-        Rectangle {
-            height: 30px;
-            Text {
-                opacity: (root.item.checked ? 0.5 : 1.0);
-                font-size: 12pt;
-                text: root.item.name;
+            Rectangle {
+                height: 30px;
+                Text {
+                    text: root.item.amount;
+                    font-size: 12pt;
+                }
+            }
+
+            Rectangle {
+                height: 30px;
+                Text {
+                    opacity: (root.item.checked ? 0.5 : 1.0);
+                    font-size: 12pt;
+                    text: root.item.name;
+                }
             }
         }
     }
@@ -169,7 +188,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{