Animating Listview item


#1

Hello guys Im having problem with animating elements inside of listview ,
I have a listview with items , and I want when I click listview to o
my bottom stack layout with id tickets
like sliding down,slide up, like a accordion
here is my code:

card.xml

<StackLayout>
                <lv:RadListView id="ticketsList" items="{{ tickets }}">
                    <lv:RadListView.itemTemplate>
                        <StackLayout tap="showHide" class="item">
                            <GridLayout class="card-layout" rows="*,*,*" columns="" >
                                            <Label text = "CARD ITEM" />
                            </GridLayout>
                            <StackLayout  id="tickets" class="collapsed">
                                    <lv:RadListViewr items="{{ logs }}">
                                                <lv:RadListView.itemTemplate>
                                              <StackLayout  >
                                                        <Label text="{{log}}" />
                                             </StackLayout>
                                            </lv:RadListView.itemTemplate>
                                          </lv:RadListView>
                                           <Button text="close" tap="close" />
                            </StackLayout>
                        </StackLayout>
                    </lv:RadListView.itemTemplate>
                </lv:RadListView>
                <ActivityIndicator busy="{{ isLoading }}" />
            </StackLayout>

card.js
function showHide(args) {
    layout = args.object.getViewById('tickets');
    if (layout.visibility === 'visible') {
        layout.visibility = 'collapsed';
    } else {
        layout.visibility = 'visible';
    }
}

card.css 
.collapsed {
   visibility:collapsed;
}

I have folowing code with toggling visibility but its not working properly on IOS (tickets are always closed, and when tapping nothing happen only when I scroll trough list, list items open.),
and I would like to add some animation like fadeIn, our slidein and out etc??
How can I do this???
Like animating height or something ??

I have found this code sample


but since Im a newbie , how can I write this in pure javascript without typescript ???


#2

There is a plugin which supports that, since ListView reuses templates animating / modifying a row is not as straight forward as usual components.


#3

Thanx @manojdcoder, I laready new about that plugin, I was interested if there is some other way to do it, in pure javascript ???


#4

If you are expecting a smooth animation, definitely not possible with pure JavaScript. At least in iOS, UITableView (ListView) has it’s own policies you must follow it. That plugin is the only way for now to do that without touching native code.


#5

No I have seperate xml for IOS, it will use different logic… I was just asking if its possible with pure javascript and observables for Android :slight_smile:


#6

As mentioned in the issue you linked, it should be straight forward for Android, iOS has restrictions in dynamically changing measurements of template.