LayoutAnimation when changing the size of an intem

How-to Discussions
1

In this example a list of days is shown with all the activities to do that day. When you click on an activity it shows the “remove activity” panel (increasing the size of the panel).

If i want the items to be “pushed down” when clicking on an item i should remove the LayoutAnimation inside the son (but then i don’t get the animation when removing the first item for example). If i keep the LayoutAnimation inside the son object then the animation takes place AFTER the item size has been changed (so while it’s growing it covers the item below)

can i have both animations? (items “pushed down” while the panel is growing + layout animation when an item is removed)

file
file375×669

<App>
    <JavaScript>
        var Observable  = require("FuseJS/Observable");

        var objects = Observable();

        reload();

        function reload() {
            objects.clear();

            objects.add(new MainObject({
                day: "Monday"
            }))

            objects.getAt(0).addSon({
                activity: "tennis"
            })

            objects.getAt(0).addSon({
                activity: "soccer"
            })

            objects.add(new MainObject({
                day: "Friday"
            }))

            objects.getAt(1).addSon({
                activity: "fishing"
            })
        }

        function Son(info){
            this.activity = info.activity,
            this.showMoreInfo = Observable(false),

            this.clicked = function() {
                if (this.showMoreInfo.value) {
                    this.showMoreInfo.value = false
                } else {
                    this.showMoreInfo.value = true
                }
            }.bind(this);
        }

        function MainObject(info){
            this.day = info.day
            this.list = Observable(),

            this.remove = function(sender) {
                if (this.list.length==1) {
                    objects.remove(this);
                } else {
                    this.list.remove(sender.data);    
                }
                
            }.bind(this);

            this.addSon = function(sonInfo) {
                this.list.add(new Son(
                {
                    activity: sonInfo.activity
                }));
            }.bind(this);
        }

        module.exports = {
            objects: objects,
            reload: reload
        }

    </JavaScript>
    
    <DockPanel Background="#00000033">

        <ScrollView>
            <StackPanel>
                <Each Items="{objects}">
                    <MainObject>
                        <RemovingAnimation>
                            <Move RelativeTo="Size" X="1" Duration="0.3" Easing="CircularInOut"/>
                        </RemovingAnimation>

                        <LayoutAnimation>
                            <Move RelativeTo="LayoutChange" Y="1" Duration="0.5" Easing="BounceIn"/>
                        </LayoutAnimation>
                    </MainObject>
                </Each>    
            </StackPanel>    
        </ScrollView>

        <Panel Dock="Bottom" Height="40" Background="#f0f" HitTestMode="LocalBoundsAndChildren">
            <Text Value="Reload" TextAlignment="Center" Alignment="VerticalCenter"/>
            <Clicked Handler="{reload}"/>
        </Panel>
    </DockPanel>
    
    <StackPanel ux:Class="MainObject">
        <Text Value="{day}" Margin="5"/>
                    
        <Each Items="{list}">
            <Son>

                <RemovingAnimation>
                    <Move RelativeTo="Size" X="1" Duration="0.3" Easing="CircularInOut"/>
                </RemovingAnimation>

                <LayoutAnimation>
                    <Move RelativeTo="LayoutChange" Y="1" Duration="0.5" Easing="BounceIn"/>
                </LayoutAnimation>
            </Son>
        </Each>
    </StackPanel>

    <StackPanel ux:Class="Son" Margin="5" Background="#fff" HitTestMode="LocalBoundsAndChildren">
        
        <StackPanel HitTestMode="LocalBoundsAndChildren">
            <Text Value="{activity}" Margin="5"/>
            
            <Clicked>
                <Callback Handler="{clicked}"/>
            </Clicked> 
        </StackPanel>

        <Panel ux:Name="moreInfoPanel" Height="0" ClipToBounds="true" Background="#f00" HitTestMode="LocalBoundsAndChildren">
            <Text Value="CLICK HERE TO REMOVE!!" TextAlignment="Center" Alignment="VerticalCenter" TextColor="#fff"/>
            <Clicked>
                <Callback Handler="{remove}"/>
            </Clicked> 
        </Panel>

        <WhileTrue Value="{showMoreInfo}">
            <Change moreInfoPanel.Height = "30" Duration="0.4"/>
        </WhileTrue>
    </StackPanel>
</App>
2

Hey @zaulin,

I recall building something similar a while ago, and I think I solved it by changing the LayoutRole (Inert/Standard) of the element that was affecting the height of the container panel. In addition, I was using both Move and Resize triggers in the same LayoutAnimation, as opposed to using a stand-alone Change to modify the height.

Unfortunately I don’t have that exact code anymore, so I will give it a go to try and recreate it some time tomorrow or the day after. Maybe the bits above help you do it by yourself before that.

3

Thnx!

some code will be highly appreciated as it’s my first take on layout animations so i’m not sure if i’ll succeed :slight_smile: (i’ll try anyway)