How to animate properties after operating on a model?

[vede1]

For example, a model holds a list of cards. Add one card and then animate its opacity. Using VecModel::push with opacity property and then updating it with Model::set_row_data isn't the proper way. It seems it is possible to simulate this by preloading a card count with default values as in the example below. Click "click" a few times and then click each of the cards to see the intended effect. Unfortunately, with this approach height of each element is fixed.

import { Button } from "std-widgets.slint";
export component Demo {
    width: 150px;
    height: 300px;
    property <[{o: float, h: length, c: color}]> props: [{ o:0, h:0px, c: rgb(255,0,0) }, { o:0, h:0px, c: rgb(0,255,0) }, { o:0, h:0px, c: rgb(0,0,255) }, { o:0, h:0px, c: rgb(0,255,255) }, { o:0, h:0px, c: rgb(255,0,255) }, { o:0, h:0px, c: rgb(255,255,0) }];
    property <int> c: 0;
    VerticalLayout {
        Rectangle {
            border-width: 2px;
            border-color: red;
            VerticalLayout {
                alignment: start;
                Button {
                    text: "add";
                    clicked => {
                        props[c].o = 1;
                        props[c].h = 50px;
                        c = c + 1;
                    }
                }

                for x[i] in props.length: Rectangle {
                    height: props[i].h;
                    opacity: props[i].o;
                    background: props[i].c;
                    animate opacity { duration: 800ms; }
                    animate height { duration: 500ms; }
                    Text {
                        text: i;
                    }

                    TouchArea {
                        clicked => {
                            props[i].o = 0;
                            props[i].h = 0px;
                        }
                    }
                }
            }
        }

        Rectangle { }
    }
}

[ogoffart]

What you ask is unfortunately not yet implemented.
This is tracked at issue #3258

I think you don't need to have a fixed height using your trick.
Example:

import { Button, HorizontalBox } from "std-widgets.slint";
export component Demo {
    width: 150px;
    height: 300px;
    property <[{o: float, v: bool, c: color}]> props: [{ c: rgb(255,0,0) }, { c: rgb(0,255,0) }, { c: rgb(0,0,255) }, { c: rgb(0,255,255) }, {  c: rgb(255,0,255) }, { c: rgb(255,255,0) }];
    property <int> c: 0;
    VerticalLayout {
        Rectangle {
            border-width: 2px;
            border-color: red;
            VerticalLayout {
                alignment: start;
                Button {
                    text: "add";
                    clicked => {
                        props[c].o = 1;
                        props[c].v = true;
                        c = c + 1;
                    }
                }

                for x[i] in props: Rectangle {
                    height: x.v ? layout.preferred-height : 0px;
                    opacity: x.o;
                    background: x.c;
                    animate opacity { duration: 500ms; }
                    animate height { duration: 500ms; }
                    layout := HorizontalBox {
                        Text {
                            text: i + "+"+ parent.opacity;
                        }
                    }
                    TouchArea {
                        clicked => {
                            x.o = 0;
                            x.v = false;
                        }
                    }
                }
            }
        }

        Rectangle { }
    }
}

link

[Vadoola]

It sounds like what you are looking for is appear and disappear animations which are not yet supported. I managed to make something work but its a bit hacky and requires extra boilerplatete.

This discussion #4932 has some more info.

You could also look at my sample repo linked in that discussion or the final form as implemented in Tomotroid.

I'm on mobile so I don't have time to try and type up a more detailed answer, but hopefully that points you in the right direction.