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);