Beta 14 css transition super slow


#1

Here is my app.
Cards will stack together when first time lunched the app.
I applied a simple css transition for each card. User can expand any card by touch it’s title area or click the button(red circle) to spread them all.

Everything works fine besides the css transition and ion-content scrolling. I can see there is improvement on the scrolling compare with the previous build. But the transition runs super slow, for me is not acceptable.

I test it with both beta 14 stable and nightly build on ios and android devices, same slow result. I even tried to remove all the shadow, border-radius effect and removed the background image for each cards, still can not find the reason.

Code attached below:

I used each cards’ checked property to switch
ng-class="{‘card-moveup’ : card.checked}" on and off, card-moveup class with css transition.

//Spread all cards

  $scope.changeCardsDeck = function () {
            if ($scope.expanded) {
                for (var index in $scope.cards) {
                    if ($scope.cards.hasOwnProperty(index) && index > 0) {
                        $scope.cards[index].checked = true;
                    }
                }
            }
            else {
                for (var index in $scope.cards) {
                    if ($scope.cards.hasOwnProperty(index) && index > 0) {
                        $scope.cards[index].checked = false;
                    }
                }
            }
            $scope.expanded = !$scope.expanded;
        };

//move one card only

            $scope.moveNextCardUp = function (index) {
                if (index < $scope.cards.length - 1) {
                    $scope.cards[index + 1].checked = !$scope.cards[index + 1].checked;
                }
                appDataShare.updateCards($scope.cards);
            };

HTML

<ion-content class="has-header has-subheader"
             scroll="true"
             has-bouncing="true">
    <ion-refresher pulling-text="Update..." on-refresh="refreshAllPublicCard(true)">

    </ion-refresher>
    <div ng-repeat="card in cards"
         style="position: relative"
         ng-class="{'card-moveup' : card.checked}"
         class="my-card-base">
        <!--<div class="card ratio-card-mycard" style="background: url('{{defaultBG}}')">-->
        <div class="card ratio-card-mycard">
            <img image-on-loaded
                 ng-src="{{url}}{{card.ID}}.png"
                 style="width: 100%; height: auto; max-height: 100%; position: absolute">
            <div class="card-title row" ng-click="moveNextCardUp($index)">
                <div class="col-67">
                    <p id="chineseText" class="chinese" style="text-shadow: 0px 2px 2px {{card.CardColor}}">
                        {{card.ChineseName}}
                    </p>
                    <p class="english" style="text-shadow: 0px 2px 2px {{card.CardColor}}">
                        {{card.EnglishName}}
                    </p>
                </div>
                <div class="col-33" style="text-align: right">
                    <p class="expireLabel" style="color: {{card.CardColor}}">
                        Expried:
                    </p>
                    <p class="expireDate" style="color: {{card.CardColor}}">
                        {{card.ExpireDate}}
                    </p>
                </div>
            </div>
            <div class="card-content"
                 ng-click="showDetail($index)">
                <div class="contents">
                    <div class="row">
                        <div>
                            <p class="cardNumberLabel" style="color: {{card.CardColor}}">
                                Cards:
                            </p>
                            <p class="cardNumber" style="text-shadow: 0px 2px 2px {{card.CardColor}}">
                                {{card.number}}
                            </p>
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div style="position: relative; text-shadow: 0px 2px 2px {{card.CardColor}}">
                            <h2 class="balanceLabel">
                                Balance:
                                <span class="balanceNumber">
                                    {{card.Points}}
                                </span>
                            </h2>
                        </div>
                    </div>

                </div>
            </div>


        </div>
    </div>
</ion-content>

CSS transition:

@include transition(all 0.3s $ease-out-quart);

#2

I tried to remov the image tag, every card moved fly, thought may be list not support image very well.


#3

Any chance you could throw this into a codepen or plunkr?


#4

[1]: http://blog.alexmaccaw.com/css-transitions[quote=“mhartington, post:3, topic:16187, full:true”]
Any chance you could throw this into a codepen or plunkr?
[/quote]

Hi mhartington,

Thank you for the quick reply.

I found the root cause.
I created a margin transform to all cards which contain a child tag with 600*400 pixel size image, I used javascript function to turn on or off this css transform using ng-class binding with a boolean tag. So simple word here I am trying to animate the margin property for each card.
Based on this [article][1], it said because of animate the margin will cause the browser to recalculating styles every frame this is fairly expensive. I used the trick to open the hardware acceleration which was suggested by above article, now card movement of performance improved a lot. But I still have a laggy issues when I trying to move all cards together at same time (ex: manipulate the margin property to expand or fold all cards).

Solution: So far the only way can solve this issue is to animate each cards’ -webkit-transform: translateY attribute instead of margin-top, but cards’ position need to calculate myself.

Don’t know if there is other solution or not?


#5

HI there were you able to get this working as smoothly as the wallet app … i’m evaluating if ionic can give me transitions like the native app or what would i need to compromis on … is your app on the app store that I could check the performance ?

thanks


#6

I’m doing something very similar to this card stack in an ionic app. But couldn’t get it done coz I’m not familiar with CSS transitions.Can you please provide me a reference which I can use to get this done? Github repo or anything?